Angular-如何在Angular 9-Ivy中进行代码拆分？

在Angular 8（

8.2.14

）中，我的应用程序可以通过延迟加载的模块进行代码拆分。 构建日志如下（省略了一些冗余行），36个块：

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]

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（

9.1.12

）后，使用

ng update

（

ng update@Angular/core@9@棱角/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

  configs如下：

    "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配合良好后再升级

• Typescript配置：

  // 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"
    ]
  }
  
  
  
  

---

请将您的tsconfig添加到问题中好吗？您已经阅读了吗？您可以运行

ng g module nyan--module app--route nyan

。它为您的页面生成一个模块，您只需在这个专用模块中加载页面实际需要的模块。您好@Steve，我已经在问题中添加了

tsconfig

文件。您好@Pieterjan，我已经读过那篇文章，但它没有帮助。请注意，从Angular 6到Angular 7和Angular 8，应用程序的代码拆分已经开始工作，当我升级到Angular 9时，它就停止工作了。这确实很奇怪。到目前为止，我还没有注意到模块的大小，但我会尝试查看它