20

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

有时它甚至会失败

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

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

4

5 回答 5

41

可以做一些事情来减少构建时间。

增加构建过程的内存限制

构建命令由节点执行，其中单个进程在 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 teamb 不断提高构建过程的速度。

值得注意的是，从版本 6 到版本 7 的构建性能升级非常可观，因此保持@angular/cli库最新始终是一个好主意。

外部库

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

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

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

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

压缩资产

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

硬件优化

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

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

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

于 2018-12-08T17:19:38.123 回答
0

对于 Windows 64 位，

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

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

  • 打开cygwin

  • 运行注释“ npm config set max-old-space-size=1024 ”

    • 根据您的应用需求，您可以增加内存限制

    • 节点 --max-old-space-size=1024 #增加到 1gb

    • 节点 --max-old-space-size=2048 #增加到 2gb
    • 节点 --max-old-space-size=3072 #增加到 3gb
    • 节点 --max-old-space-size=4096 #增加到 4gb
    • 节点 --max-old-space-size=5120 #增加到 5gb
    • 节点 --max-old-space-size=6144 #增加到 6gb
    • 节点 --max-old-space-size=7168 #增加到 7gb
    • node --max-old-space-size=8192 #增加到8gb
于 2020-01-22T07:08:47.020 回答
0

将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 run go

于 2020-01-30T05:05:41.100 回答
0

尝试运行npx. 就我而言：npx run build --prod

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

只有使用 npx 我才能使它工作。

于 2020-02-24T12:53:13.567 回答
0

就我而言，我已将 Pool 从 'ubantu-latest' 替换为 'windows-latest' 并且它可以工作

于 2020-08-24T19:11:29.443 回答