【发布时间】：2020-09-27 01:15:24
【问题描述】：
索引：
我正在使用 angular cli - 7，我将根据我的知识告诉我如何减少构建时间。
问题：
现在，很多用户和开发人员都在等待启用 Build optimizer 的内置产品太久。
如果您的应用程序有很多文件（超过 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.3version。
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 分钟。请访问blog了解更多详情。
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%-12% 的过程中也减少了 10 - 15 分钟。
结果：
现在我的应用程序构建时间减少了 1 个多小时，现在可以在 20-30 分钟内运行。
我想知道什么？
上述更改是否会在角度构建编译和运行时产生任何问题？如果您有任何替代/其他解决方案来通过构建优化减少构建时间，请告诉我。
【问题讨论】：
-
@AluanHaddad 。我们使用了单独/子模块实现，还实现了延迟加载。 :)
-
@AluanHaddad，当我的项目规模很大时，我也遇到了这个问题。我尝试了很多次我的架构，但没有发现任何这样的问题。我通过禁用供应商块并使用 aot=true 禁用构建优化器暂时解决了这个问题
-
@RameshRajendran，这就是我们要说的。
-
@AluanHaddad 在我的情况下，QA 环境也确实需要它。在我的应用程序中，我们希望在 QA 和 UAT 中运行构建，与优化的 prod 相同。
-
我认为这是很好的做法。您可以尝试使用caching in Webpack
标签： javascript angular typescript architecture devops