如何减少角度应用程序的构建时间？ [英] How to reduce angular application build time?
问题描述
我正在使用角度cli-7，并且根据我的知识，我将告诉您如何减少构建时间。
I am using angular cli - 7 and I am going to tell how to reduce the build time as per my knowledge.
现在，许多用户和开发人员对于启用了构建优化器。
Now the days, lot of users and developers are waiting too long for the build in prod with enabled Build optimizer.
如果您的应用程序包含大量文件（超过1000个组件），则构建时间将超过1个小时。
If your application having lot of files(more than 1000 components), then the build timing is taking more than 1 hour.
在我的应用程序中，我们启用了质量检查的构建优化功能，并且构建时间超过2小时。因此，由于构建时间长，因此很难对测试人员/开发人员进行快速功能测试。因此，我决定减少构建时间。
In my application, we're enabled build optimization for QA also build time is more than 2 hours . So it's very difficult to quick function test for testers/developer because long build time. So I have decided to reduce the build time.
我检查了每个构建过程，以了解哪个步骤也正在执行太长了，所以我发现以下步骤花费了太长时间。
I checked each and every build process to know which step is taking too long to complete, So I found the following steps are taking too long to complete.
- 69％-70％-编译过程-，所以我们不能由于文件编译而减少此结果。
- 79％-80％-串联模块-此过程耗时超过25分钟。
- 90％-92％-为terser进行块优化-此过程大约需要40分钟，并且占用过多CPU资源（发生系统挂起）。 / li>
- 69%-70% - compilation process- , So we can't reduce this due to file compilation .
- 79%-80% - Concatenation Module - This process is taking more than 25 mins.
- 90%-92% - Chunk optimization for terser - this process is taking around 40 mins and taking too much of CPU process( system hanging happened).
69％-70％：编译
这是编译过程，所以就不用管了。
It's compiling process, So leave it.
79％-80％：串联模块过程：
请按照以下步骤操作
1- npm i -D @ angular-builders / custom-webpack
1- npm i -D @angular-builders/custom-webpack
注意： 我正在由于某些版本问题，在我的应用程序中安装了 ^ 7.4.3 版本。
Note: I have installed ^7.4.3version in my application due to some version issue.
2-更改 angular.json 配置，如下所示
2-Change the angular.json configuration as the following way
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
3-在angular.json旁边创建一个名为extra-webpack.config.js的新文件并使用以下代码
3-Create a new file named extra-webpack.config.js next to angular.json with the following code
module.exports = {
optimization: {
concatenateModules: false
}
};
如果执行上述步骤，构建时间将减少30分钟左右。请访问此博客以获取更多详细信息。
If you did this above steps, The build time is reduced around 30 mins. Please visit this blog for more details.
90％-92％：块状代码优化：
如果节点模块文件夹中有Terser，请在package.json文件的下面添加此行。
Please add this below line in package.json file if you had terser in your node module folder.
"resolutions": {
"uglify-es": "npm:terser"
}
注意：如果您没有 terser 在节点模块文件夹中，然后请进行安装。
Note: if you don't have terser in node module folder , then please do install.
2293551ms ---无分辨率
596900ms ---有分辨率
如果您想减少更多的构建时间，请在您的构建命令或 angular.json 文件
If you want reduce more build time, then please enable vendor chunk and disable extract CSS in your build command or in angular.json file
ng build --configuration=qa --vendor-chunk=true --extract-css=false
影响不大，但在10％-12％的过程中也减少了10-15分钟。
现在我的应用程序构建时间减少了1小时以上，现在它的运行时间为20- 30分钟。
我想知道什么？
是那些以上昌es会在角度构建编译和运行时出现问题吗？并告诉我您是否有其他替代/附加解决方案，可以通过启用构建优化来减少构建时间。
Is those above changes will make any problem in angular build compilation and run time? and let me know if you have any alternative/additional solution to reduce build time with enabled build optimization.
推荐答案
根据问题，我在应用程序中执行了相同的实现。而且在3个月内，我已经完成了100多个版本。现在，该应用程序运行良好，没有任何问题，并且每个版本的构建都在350-40分钟内完成（大约花了2个小时）。
As per the question I have done the same implementation in my application. And also I have completed more than 100 build's in between 3 months. Now the application is working very well without any problem and also each and every build's are completed within 350-40 mins(before it was taken around 2 hours).
所以我从自己/我的应用程序中找到了答案，我100％确信那些答案（79％-80％和90％-92 ％）的更改不会影响您的应用程序。
这篇关于如何减少角度应用程序的构建时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
