angular - Angular - 如何在 Angular 9 - Ivy 中进行代码拆分?
问题描述
在 Angular 8 ( 8.2.14
) 中,我的应用程序可以通过延迟加载的模块进行代码拆分。构建日志如下(省略了一些多余的行),36个chunk:
chunk {3} runtime-es2015.c423f91aaae76527df5b.js (runtime) 3.08 kB [entry] [rendered]
chunk {3} runtime-es5.c423f91aaae76527df5b.js (runtime) 3.07 kB [entry] [rendered]
chunk {2} 2-es2015.539ede95a6745ef5d2bf.js () 22.6 kB [rendered]
...
chunk {12} polyfills-es2015.32f951d8d1908f922bdc.js (polyfills) 35.6 kB [initial] [rendered]
chunk {10} 10-es2015.8da7355d1a7b512401a1.js () 31.7 kB [rendered]
...
chunk {0} 0-es5.bfd951267cfba9ec1f8d.js () 32.4 kB [rendered]
chunk {1} common-es2015.10ba6f24dba298440ecc.js (common) 13.4 kB [rendered]
chunk {1} common-es5.10ba6f24dba298440ecc.js (common) 19.6 kB [rendered]
...
chunk {11} main-es2015.29e5558ae4fba71b1763.js (main) 755 kB [initial] [rendered]
chunk {11} main-es5.29e5558ae4fba71b1763.js (main) 806 kB [initial] [rendered]
chunk {36} 36-es2015.f988ae90643f26871ae8.js () 231 kB [rendered]
...
chunk {15} vendor-es5.e7af4362172dcd47c55b.js (vendor) 1.41 MB [initial] [rendered]
chunk {14} styles.5ab582a2e3cd140ea795.css (styles) 301 kB [initial] [rendered]
升级到 Angular 9 ( 9.1.12
) 后,使用ng update
( ng update @angular/core@9 @angular/cli@9
)。
该应用程序运行良好,但生产构建包含几个大包,构建日志如下,6 个块:
chunk {0} runtime-es2015.602346de10cd8007336b.js (runtime) 2.25 kB [entry] [rendered]
chunk {0} runtime-es5.602346de10cd8007336b.js (runtime) 2.25 kB [entry] [rendered]
chunk {3} polyfills-es2015.b2b33e7ed47c34d70569.js (polyfills) 37.4 kB [initial] [rendered]
chunk {2} main-main-module-es2015.f40c22576bd3c677d2bf.js (main-main-module) 1.63 kB [rendered]
chunk {2} main-main-module-es5.f40c22576bd3c677d2bf.js (main-main-module) 3.24 kB [rendered]
chunk {4} polyfills-es5.9fc110dc43c419da899c.js (polyfills-es5) 130 kB [initial] [rendered]
chunk {1} main-es2015.49ac9fca75e556a35c57.js (main) 1.45 MB [initial] [rendered]
chunk {1} main-es5.49ac9fca75e556a35c57.js (main) 1.54 MB [initial] [rendered]
chunk {6} vendor-es2015.b8aa44d253e8fc5e1203.js (vendor) 2.28 MB [initial] [rendered]
chunk {6} vendor-es5.b8aa44d253e8fc5e1203.js (vendor) 2.44 MB [initial] [rendered]
chunk {5} styles.03960512702293db9549.css (styles) 288 kB [initial] [rendered]
那么,如何在 Angular 9、Ivy 渲染器中对延迟加载的模块进行代码拆分?
笔记:
升级由 自动运行
ng update
,无需手动修复。全部
loadChildren
更改为新语法:loadChildren: () => import('../authentication/authentication.module').then((m) => m.AuthenticationModule),
相关
angular.json
配置在这里:"production": { "fileReplacements": [ { "replace": "apps/web-web/src/environments/environment.ts", "with": "apps/web-web/src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ], "serviceWorker": true, "ngswConfigPath": "apps/web-web/ngsw-config.json" } }
我们现在不想升级到 Angular 10,因为我们正在与 Nativescript Angular 项目共享代码,并且希望等到 Nativescript 与 Angular 10 很好地配合使用。
打字稿配置:
// tsconfig.json { "compileOnSave": false, "compilerOptions": { "rootDir": ".", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es2015", "module": "esnext", "typeRoots": ["node_modules/@types"], "lib": ["es2017", "dom"], "skipLibCheck": true, "skipDefaultLibCheck": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "baseUrl": ".", "paths": { "@workspacename/*": ["libs/*"], "@workspacename/nativescript": ["xplat/nativescript/index.ts"], "@workspacename/nativescript/*": ["xplat/nativescript/*"], "@workspacename/web": ["xplat/web/index.ts"], "@workspacename/web/*": ["xplat/web/*"], "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"], "core-js/es6/*": ["node_modules/core-js/es/*"] } }, "exclude": ["node_modules", "tmp"] } // apps/project-name/tsconfig.json { "extends": "../../tsconfig.json", "compilerOptions": { "types": ["node", "jest"] }, "include": ["**/*.ts"] } // apps/project-name/tsconfig.app.json { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../../dist/out-tsc", "types": [] }, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "**/*.d.ts" ], "exclude": [ "src/test-setup.ts", "**/*.spec.ts", "**/*.stories.ts" ] }
解决方案
推荐阅读
- r - 在没有日期的情况下减去小时数
- spring-boot - 原因:org.springframework.data.mapping.PropertyReferenceException:没有找到类型 Project 的属性 languageId
- c++ - cmake 找不到“OPENCV”提供的包配置文件
- scala - 如果总运行时间更多用于新构建,如何在 Azure 中获取通知
- unity3d - 尝试为统一插件演示运行 VLC
- javascript - 在 d3 js 中选择绘图点
- reactjs - 将添加到日历 HOC 与自定义设计/材质 UI 相结合
- html - 如何在 URL 中隐藏父文件夹名称?
- android - 从 java 文件访问 AAR 文件的内容
- django - 具有非唯一名称的 Django 模型