改善Angular 7应用程序的生产构建时间

Question

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

有时它甚至失败了

致命错误:堆限制附近的无效标记 - 压缩分配失败 - JavaScript堆内存不足

我能做些什么来缩短构建时间吗？

Answer 1

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

增加构建过程的内存限制

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

由于此参数必须传递给节点进程本身,因此该命令必须直接与节点一起运行.为进程分配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 teamb不断提高构建过程的速度.

值得注意的是,从版本6到7的构建性能的升级非常重要,因此保持@angular/cli库最新是一个好主意.

外部图书馆

要拥有快速构建应用程序,您需要非常小心导入哪些库.

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

查找支持Webpack的Tree-Shaking的库,以允许构建过程仅捆绑应用程序中实际使用的库部分.

此外,如果您只需要使用单个函数(例如_get()),请不要陷入添加整个实用程序库(例如lodash)的陷阱.

压缩资产

压缩资产(通常是图像)在很大程度上是一项微不足道的任务(只是google"在线压缩图像"),它可以提高构建过程和应用程序本身的性能.

硬件优化

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

事实上,如果您在构建期间监视CPU,您将看到在整个过程中几乎没有100%负载的核心.

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