Question

我的应用程序使用Maybe Picture构建生产需要花费很长时间

有时甚至失败

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

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

Answer 1

可以采取一些措施来减少构建时间。

增加构建过程的内存限制

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

由于必须将此参数传递给节点进程本身，因此该命令必须直接与node运行。为该进程分配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()），也不要陷入添加整个实用程序库的陷阱。

压缩资产

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

硬件优化

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

实际上，如果在构建过程中监视CPU，则几乎在整个过程中都会看到单个内核承受100％的负载。

如果您在持续集成设置中定期使用生产标志构建应用程序，则可以考虑使用配备了高单线程性能的计算机（有关基准，请参见cpubenchmark.net）

Answer 2

对于Windows 64位，

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

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

打开cygwin
运行注释“ npm config set max-old-space-size = 1024 ”
- 根据您的应用程序需求，可以增加内存限制
- 节点--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 run go

Answer 4

尝试使用npx运行。就我而言：npx run build --prod

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

只有使用npx，我才能使其正常工作。

Answer 5

就我而言，我已将Pool从“ ubantu-latest”替换为“ windows-latest”，并且可以正常工作

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

5 个答案: