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

问题描述

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

有时甚至会失败

<块引用>

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

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

解决方案

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

增加构建过程的内存限制

构建命令由节点执行，其中单个进程在 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 文件中的配置.默认值为

生产":{文件替换":[{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}],优化":真，"outputHashing": "全部",源地图":假，extractCss":真，"namedChunks": 假,aot":真的，"extractLicenses": 真,vendorChunk":假，构建优化器":true}

除非有充分的理由，否则不要偏离生产构建默认值.

这些是保持较短构建时间的重要部分(特别是禁用 sourceMap 和启用 buildOptimizer).

更新您的 Angular CLI 版本

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

值得注意的是，从版本 6 到版本 7 的构建性能提升是巨大的，因此保持 @angular/cli 库是最新的总是一个好主意.

外部库

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

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

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

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

压缩资产

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

硬件优化

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

事实上，如果您在构建期间监控 CPU，您会发现在整个过程中，单个内核几乎处于 100% 的负载之下.

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

My application takes a very long time to build for production using ng build --prod

Sometimes it even fails with

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.

Increase the memory limit of the build process

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

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.

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.

Fix references to node_modules in .scss files

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

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"

use

import "~node_modules/x/whatever.css"

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.

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

Update your Angular CLI version

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

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.

External libraries

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

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

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.

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()).

Compressing assets

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.

Hardware optimizations

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

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屋！