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

Question

指数：

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

问题：

现在，许多用户和开发人员都在等待启用Build optimizer 的prod 构建时间太长。

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

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

我分析了什么。

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

• 69%-70% - 编译过程- ，所以我们不能因为文件编译而减少这个。
• 79%-80% - 串联模块 - 这个过程需要超过 25 分钟。
• 90%-92% - terser 的块优化 - 这个过程大约需要 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 的块优化：

如果您的节点模块文件夹中有 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%-12% 的过程中减少了 10 - 15 分钟。

结果：

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

我想知道什么？

上述更改是否会在角度构建编译和运行时产生任何问题？并让我知道您是否有任何替代/附加解决方案来通过构建优化来减少构建时间。

Answer 1

集成上述更改后，我们已经测试了构建超过 15 次，现在应用程序运行良好，没有任何问题，并且现在构建在 35-40 分钟内执行（之前是大约 2 小时）。

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