提高Angular 7应用程序的生产构建时间

使用

ng build--prod

有时它甚至会失败

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

---

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

可以做一些事情来缩短构建时间

增加生成过程的内存限制 build命令由节点执行，其中单个进程在64位计算机上的最大内存限制为1.76 GB。可以通过在build命令中添加

--max old space size

参数来增加该值

由于此参数必须传递给节点进程本身，因此命令必须直接与节点一起运行。向进程分配4096 MB（4GB）RAM的示例如下：

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

增加内存限制还可以防止“堆内存不足”错误

进程使用的内存量似乎是有限制的。我的一个项目通过将内存增加到12GB显著缩短了构建时间，但将其增加到32GB并没有带来进一步的改进

修复对.scss文件中节点_模块的引用 使用相对路径从节点_模块引用外部样式表会对构建过程产生负面的性能影响，应该避免

构建过程使用Webpack的

sass加载器

，该加载器支持一种语法，其中节点模块的位置由tilde

~

引用

使用平铺代替相对路径可以大大缩短构建时间。因此，与其使用导入外部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）

更新您的CLI版本 Angular CLI teamb不断提高构建过程的速度

值得注意的是，从版本6到版本7的内部版本性能升级非常重要，因此保持

@angular/cli

库的最新始终是一个好主意

外部图书馆 要快速构建应用程序，需要非常小心导入哪些库

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

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

另外，如果只需要使用一个函数（如

\u get（）

），不要陷入添加整个实用程序库（如lodash）的陷阱

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

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

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

如果您正定期地将应用程序标记为生产标志，作为持续集成设置的一部分，您可以考虑使用具有高单线程性能的机器（用于基准，参见）/P>< P> Windows 64位，

分辨率：我们需要增加节点的默认内存限制

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

• 打开cygwin
• 运行注释“npm config set max old space size=1024”
  • 根据您的应用程序需要，您可以增加内存限制

  • 节点--最大旧空间大小=1024#增加到1gb

  • 节点--最大旧空间大小=2048#增加到2gb
  • 节点--最大旧空间大小=3072#增加到3gb
  • 节点--最大旧空间大小=4096#增加到4gb
  • 节点--最大旧空间大小=5120#增加到5gb
  • 节点--最大旧空间大小=6144#增加到6gb
  • 节点--最大旧空间大小=7168#增加到7gb
  • 节点--最大旧空间大小=8192#增加到8gb

---

将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/>

“脚本”：{

“ng”：“ng”，

“开始”：“ng发球”，

**“go”：“节点——最大旧空间大小=8192./node\u模块/@angular/cli/bin/ng构建”，***

.

.

---

然后在命令行或终端中使用npm run go
尝试使用

npx

运行。在我的例子中：

npx run build--prod

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

---

只有使用npx，我才能使其正常工作。
在我的例子中，我将池从“ubantu-latest”替换为“windows-latest”，并且它正常工作
为什么压缩静态资产（如图像）会影响构建时间（而不是复制到

/dist

的较小文件）？我仍然认为，在运行应用程序时，将构建分解为可并行任务可能是有意义的--prod也是.node--max old space size=4096./node_modules/@angular/cli/bin/ng s--prodIt为我工作：

"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/>