减少大型 Angular 8 中的构建时间

Question

在生产模式下构建项目大约需要 10-15 分钟，dist 文件夹大小为 32MB

这些是我正在使用的生产选项：-

"production": {

          "optimization": true,

          "outputHashing": "all",

          "sourceMap": false,

          "extractCss": true,

          "namedChunks": false,

          "aot": true,

          "extractLicenses": true,

          "vendorChunk": false,

          "buildOptimizer": true,

          "fileReplacements": [

            {

              "replace": "src/environments/environment.ts",

              "with": "src/environments/environment.prod.ts"

            }

          ]

        }

我正在运行以下命令来构建项目：-

节点 --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng 构建 --prod --source-map=false --named-chunks=false --statsJson=false

PS：我已经尝试过使用 Ivy。它不支持遗留代码，因此构建失败。

任何帮助都感激不尽。谢谢。

Answer 1

以下是一些基本步骤减少应用导入的库数量确保所有重要的库都是 FESM/ESM 格式而不是 UMD/CommonJS 格式减少应用导入的 Sass/Less 数量确认您没有导入/生成重复样式 ( 1 )将您的应用程序分解为更多模块并进一步调查最大/最慢的模块将您的应用程序的部分分解为库（并考虑将您的路径映射指向您dist/的库版本减少应用使用的资源的大小和数量某些版本的 Angular 或 CLI 在这方面有回归，建议使用最新的 8.3.x 或 11.2.x减少应用程序中循环模块和库依赖项的数量如果您做了所有这些并且您的产品构建仍然超过 10 分钟，我建议您查看Nx 增量构建。如果您完成了所有设置并且您的构建仍然太慢并且您有多个团队在您的应用程序上工作，那么您可能需要查看Module Federation。

Answer 2

检查先前问题的堆栈答案ng build --source-map=false希望这会有所帮助... !!

Answer 3

您可以尝试使用 webpack Bundle Analyzer 来查看是否生成了一些大型捆绑包...https://alligator.io/angular/bundle-size/