angular - 改进 Angular 7 应用程序的生产构建时间

Question

我的应用程序需要很长时间才能使用 ng build --prod

构建生产环境

有时甚至会失败

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

我可以做些什么来减少构建时间吗？

Answer 1

可以采取一些措施来缩短构建时间。

增加构建过程的内存限制

构建命令由节点执行，其中单个进程在 64 位机器上的最大内存限制为 1.76 GB。可以通过在构建命令中添加 --max-old-space-size 参数来增加它

由于必须将此参数传递给节点进程本身，因此必须直接使用节点运行该命令。为进程分配 4096 MB (4GB) RAM 的示例如下:

node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build

增加内存限制也将防止“堆内存不足”错误。

进程使用的内存量似乎确实存在限制。我的一个项目通过将内存增加到 12GB 显着缩短了构建时间 - 但将其增加到 32GB 并没有进一步改善。

修复 .scss 文件中对 node_modules 的引用

使用相对路径从 node_modules 引用外部样式表会对构建过程产生负面的性能影响，应该避免。

构建过程使用 Webpack 的 sass-loader，它支持使用波浪号 ~ 引用 node_modules 位置的语法。

使用波浪号而不是相对路径大大减少了构建时间。因此，不要使用

导入外部 css 样式表

import "../../../../../node_modules/x/whatever.css"

使用

import "~node_modules/x/whatever.css"

生产优化

默认情况下，生产构建使用 angular.json 文件中的配置。默认值为

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true
}

除非你有充分的理由，否则不要改变生产构建的默认值。

这些是保持较低构建时间的重要部分(特别是禁用 sourceMap 并启用 buildOptimizer)。

更新你的 Angular CLI 版本

Angular CLI 团队不断提高构建过程的速度。

值得注意的是，从版本 6 到版本 7 的构建性能有了显着提升，因此保持 @angular/cli 库为最新始终是一个好主意。

外部库

要快速构建应用程序，您需要非常小心导入哪些库。

许多流行的库，如 jQuery、lodash 和 moment 的大小都非常大，并且没有针对 Webpack 构建过程进行适当的优化。

寻找支持 Webpack 的 Tree-Shaking 的库允许构建过程仅捆绑您的应用程序中实际使用的库部分。

此外，如果您只需要使用其中的一个函数(如 _get())，请不要陷入添加整个实用程序库(如 lodash)的陷阱。

压缩资源

压缩 Assets (通常是图像)在很大程度上是一项微不足道的任务(只需谷歌“在线压缩图像”)，它可以提高构建过程和应用程序本身的性能。

硬件优化

由于 Javascript 是单线程的，因此拥有多个 CPU 内核的好处不会加快构建过程。

事实上，如果您在构建过程中监控您的 CPU，您会发现在整个过程中几乎有一个内核处于 100% 的负载之下。

如果您经常使用生产标志构建应用程序作为持续集成设置的一部分，您可以考虑使用配备高单线程性能的机器(有关基准测试，请参阅 cpubenchmark.net)