缩短Angular 7应用程序的生产构建时间 [英] Improving production build time for Angular 7 application

问题描述

我的应用程序使用ng build --prod

有时甚至会失败

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

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

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

Is there something I can do to reduce the build time?

推荐答案

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

There are some things that can be done to reduce the build time.

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

The build command is executed by node where a single process has a maximum memory limit of 1.76 GB on 64bit machines. It can be increased by adding the --max-old-space-size argument to the build command

由于必须将此参数传递给节点进程本身，因此该命令必须直接与node一起运行.为该进程分配4096 MB(4GB)RAM的示例为:

Since this argument must be passed to the node process itself, the command must be run directly with node. An example allocation 4096 MB (4GB) of RAM to the process would be:

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

增加内存限制也可以防止堆满"错误.

Increasing the memory limit will also prevent the "heap out of memory" error.

该进程使用多少内存似乎没有限制.我的一个项目通过将内存增加到12GB显着减少了构建时间，但是将其增加到32GB并没有进一步的改善.

There does appear to be a limit to how much memory the process uses. A project of mine had it's build time significantly reduced by a memory increase to 12GB - but increasing it to 32GB gave no further improvement.

使用相对路径从node_modules引用外部样式表会对构建过程产生负面的性能影响，

Referencing external stylesheets from node_modules using relative paths has a negative performance impact on the build process and should be avoided.

构建过程使用Webpack的sass-loader，它支持一种语法，其中代号~引用了node_modules的位置.

The build process uses Webpack's sass-loader, which supports a syntax where the location of node_modules is referenced with the tilde ~.

使用波浪号而不是相对路径可以大大减少构建时间.因此，与其使用

Using the tilde instead of the relative path greatly reduces build time. So instead of importing external css stylesheets with

import "../../../../../node_modules/x/whatever.css"

使用

import "~node_modules/x/whatever.css"

生产优化

默认情况下，生产版本使用您的angular.json文件中的配置.默认值为

Production optimizations

By default the production build uses the configuration from your angular.json file. The default values are

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

除非有充分的理由，否则不要从生产版本默认值中转移出来.

Do not divert from the production build defaults unless you have a very good reason.

这些是减少构建时间的重要组成部分(尤其是禁用sourceMap和启用buildOptimizer).

These are a big part of keeping the build time low (espescially disabling sourceMap and enabling buildOptimizer).

Angular CLI团队不断提高构建过程的速度.

The Angular CLI teamb continuously improves the speed of the build process.

值得注意的是，将构建性能从版本6升级到版本7是相当大的，因此保持@angular/cli库为最新始终是一个好主意.

Notibly the upgrade in build performance from version 6 to 7 is substantial, so keeping the @angular/cli library up to date is always a good idea.

要拥有快速构建的应用程序，您需要非常谨慎地导入哪些库.

To have a fast building application you need to be very careful with which libraries you import.

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

Many popular libraries such as jQuery, lodash and moment are very large in size and not properly optimized for the Webpack building process.

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

Look for libraries that supports Webpack's Tree-Shaking to allow the build process to only bundle the parts of the library that is actually used in your application.

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

Also, don't fall into the trap of adding an entire utility library (such as lodash) if you only need to use a single function from it (like _get()).

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

Compressing assets (often images) is largely a trivial task (just google "compress images online"), and it can increase the performance of the build process and the application itself.

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

Since Javascript is a single-threaded the benefits of having multiple CPU cores won't speed up the build process.

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

In fact, if you monitor your CPU during the build you will see a single core is under 100% load almost during the entire process.

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

If you are regulary building your application with production flag as part of your continuous integration setup, you may consider using a machine equipped with high single-threaded performance (for benchmarks, see cpubenchmark.net)

这篇关于缩短Angular 7应用程序的生产构建时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！