如何减少角度应用程序的构建时间？

Question

索引：

我正在使用角cli-7，我将告诉您如何根据我的知识减少构建时间。

问题：

现在，很多用户和开发人员都在等待支持构建优化器的构建。

如果您的应用程序有很多文件(超过1000个组件)，那么构建时间将超过1个小时。

在我的应用程序中，我们启用了QA的构建优化，构建时间也超过了2个小时。因此，测试人员/开发人员很难快速进行功能测试，因为构建时间很长。因此，我决定缩短构建时间。

我所分析的。

我检查了每个构建过程，以了解哪一步太长而无法完成，因此我发现以下步骤花费的时间太长，无法完成。

• 69%-70% -编译过程-，所以我们不能减少由于文件编译。
• 79%-80% -级联模块-这个过程需要超过25分钟.
• 90%-92%的-块优化-这个过程大约需要40分钟，占用太多的CPU进程(系统挂起)。

我是怎么修好的？

69%-70%：编译

这是编译过程，所以别管它了。

79%-80%：级联模块进程：

请遵循以下步骤

npm i -D @转角-建设者/自定义-webpack

注意:由于某些版本问题，我在我的应用程序中安装了^7.4.3__version。

2-按以下方式更改angular.json配置

"architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
           "path": "./extra-webpack.config.js"
        },

3-使用以下代码在angular.json旁边创建一个名为over-webPack.config.js的新文件

module.exports = {
    optimization: {
       concatenateModules: false
    }
};

如果您执行了上述步骤，则构建时间将减少约30分钟。有关更多细节，请访问此博客。

90%-92%：terser的块优化：

如果您的节点模块文件夹中有terser，请在package.json文件中添加以下行。

 "resolutions": {
        "uglify-es": "npm:terser"
    }

备注：如果节点模块文件夹中没有特塞尔，那么请安装。

2293551ms -无决议

596900毫秒--有决议

其他提示：(不推荐)

如果您希望减少更多的构建时间，请在构建命令或angular.json文件中启用供应商块并禁用解压缩CSS。

ng build --configuration=qa --vendor-chunk=true --extract-css=false 

影响不大，但它也是在10%-12%的过程中减少10-15分钟.

结果：

现在我的应用程序构建时间减少了1小时以上，现在在20-30分钟的内运行。

我想知道什么？

上述更改是否会在角度构建、编译和运行时产生问题？如果您有任何其他/额外的解决方案来减少构建优化的构建时间，请让我知道。

Answer 1

复印的答案来自：https://github.com/angular/angular-cli/issues/17874#issuecomment-640568824

ConcatenateModules用于提升范围，这导致了两种情况，即更小的包大小和浏览器中更快的代码执行速度。

如果真的想禁用不推荐的concatenateModules，可以使用ngx-建筑加。

从CLI的角度来看，公开禁用concatenateModules的方法超出了范围，因为我们不希望用户选择退出关键运行时性能和包大小优化。

阅读更多