如何减少 Angular 应用程序构建时间？

Question

索引：

我正在使用 Angular cli - 7，我将讲述如何根据我的知识减少构建时间。

问题：

现在，许多用户和开发人员等待启用了构建优化器的内置产品太久了。

如果您的应用程序有大量文件（超过 1000 个组件），则构建时间将花费超过 1 小时。

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

我分析了什么。

我检查了每个构建过程，以了解哪个步骤需要太长时间才能完成，因此我发现以下步骤需要太长时间才能完成。

• 69%-70% - 编译过程- ，所以我们不能因为文件编译而减少这个。
• 79%-80% - 连接模块 - 此过程需要超过 25 分钟。
• 90%-92% - 更简洁的块优化 - 这个过程大约需要 40 分钟，并且占用了太多的 CPU 进程（发生了系统挂起）。

我是如何修复的？

69%-70%：编译

正在编译过程，所以留下它。

79%-80%：串联模块过程：

请按照以下步骤操作

1- npm i -D @angular-builders/custom-webpack

注意： 由于某些版本问题，我在我的应用程序中安装了

^7.4.3

版本。

2-按以下方式更改

angular.json

配置

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

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

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

如果您执行了上述步骤，构建时间将减少大约 30 分钟。请访问此博客了解更多详情。

90%-92%：针对简洁的块优化：

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

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

注意：如果节点模块文件夹中没有terser，请安装。

2293551ms --- 无分辨率

596900ms --- 有决议

其他提示：（不推荐）

如果您想减少更多构建时间，请在构建命令或

angular.json

文件中启用供应商块并禁用提取CSS

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

影响不大，但也减少了10-15分钟10%-12%的过程。

结果：

现在我的应用程序构建时间减少了超过 1 小时，

现在它的运行时间在 20-30 分钟内。

我想知道什么？

上述更改是否会在 Angular 构建编译和运行时产生任何问题？如果您有任何替代/附加解决方案来通过构建优化来减少构建时间，请告诉我。

Answer 1

复制答案：

https://github.com/angular/angular-cli/issues/17874#issuecomment-640568824

ConcatenateModules 用于范围提升，这会带来两件事：更小的包大小和在浏览器中更快的代码执行速度。

如果确实想禁用不推荐的 concatenateModules，您可以使用

ngx-build-plus。

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

了解更多

Answer 2

集成上述更改后，我们已经测试了构建超过 15 次，现在应用程序运行良好，没有任何问题，并且

现在构建在 35-40 分钟内执行（之前大约是 2 分钟）小时）。

而且我非常确定，这些（79%-80% 和 90%-92%）更改不会影响应用程序。