Angular - Как выполнить разделение кода в Angular 9 - Ivy? - PullRequest
Новая
       105

Angular - Как выполнить разделение кода в Angular 9 - Ivy?

2 голосов
/ 03 августа 2020

В 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]

После обновления до 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"
  }
}

  • Это проект внутри рабочего пространства Nx с xplat .

  • Мы не хотим сейчас обновляться до 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"
  ]
}
...