缩短 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

增加内存限制也将防止 "heap out of memory" 错误。

进程使用的内存似乎有限制。我的一个项目通过将内存增加到 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 "compress images online"），它可以提高构建过程和应用程序本身的性能。

硬件优化

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

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

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

Answer 2

对于 windows 64 位，

解决：我们需要增加节点的默认内存限制。

增加默认节点内存限制的步骤：

打开cygwin
运行评论“npm config set max-old-space-size=1024”
- 根据您的应用需要，您可以增加内存限制
- node --max-old-space-size=1024 #增加到1gb
- node --max-old-space-size=2048 #增加到2gb
- node --max-old-space-size=3072 #增加到3gb
- node --max-old-space-size=4096 #增加到4gb
- node --max-old-space-size=5120 #增加到5gb
- node --max-old-space-size=6144 #增加到6gb
- node --max-old-space-size=7168 #增加到7gb
- node --max-old-space-size=8192 #增加到8gb

Answer 3

将 package.json 中的 npm 命令添加到如下脚本中：

"scripts": {<br/>
"ng": "ng",<br/>
"start": "ng serve",<br/>
**"go": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build",**<br/>
.<br/>
.<br/>

然后在命令行或终端中使用 npm 运行 go

Answer 4

试试运行 npx。在我的例子中：npx run build --prod

我在运行在具有以下规格的 Google 云实例上构建时遇到了类似的问题：g1-small（1 vCPU，1.7 GB 内存）。它正在将 CPU 加载到 100%，服务器正在冻结并需要重新启动。

只有使用 npx 我才能成功。

Answer 5

在我的例子中，我将 Pool 从 'ubantu-latest' 替换为 'windows-latest' 并且有效

缩短 Angular 7 个应用程序的生产构建时间

Improving production build time for Angular 7 application

angular-cli

angular

ng-build

angular7