Index:
-----
I am using angular cli - 7 and I am going to tell how to reduce the build time as per my knowledge.
Problem:
--------
Now the days, lot of users and developers are waiting too long for the build in prod with enabled [Build optimizer][1].
If your application having lot of files(more than 1000 components), then the build timing is taking more than 1 hour.
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.
What I Analyzed.
----------------
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%** - 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).
How I fixed?
------------
**69%-70%: compilation**
It's compiling process, So leave it.
**79%-80%:Concatenation Module process:**
*Please follow this below steps*
1- npm i -D @angular-builders/custom-webpack
**Note:** *I have installed `^7.4.3`version in my application due to some version issue.*
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-Create a new file named extra-webpack.config.js next to angular.json with the following code
module.exports = {
optimization: {
concatenateModules: false
}
};
>If you did this above steps, The build time is reduced around 30 mins. Please visit this [blog][3] for more details.
**90%-92%: Chunk optimization for terser:**
Please add this below line in package.json file if you had terser in your node module folder.
"resolutions": {
"uglify-es": "npm:terser"
}
**Note**: if you don't have [terser][2] in node module folder , then please do install.
*2293551ms* --- without resolutions
*596900ms* --- with resolutions
Additional Tips:(Not Recommended)
-------------------
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
*Not a big impact, but it is also reducing 10 - 15 mins in 10%-12% process.*
Result:
-------
>Now my application build time is reduced more than 1 hour, **now it's running within 20-30 mins**.
Appreciative. The best decision that you can make is to hire an App developer near me. There are several benefits of hiring them but the question arises from where Eiliana.com is a global freelancing portal where you hire the best freelancers by filtering the location whichever suits your needs. Not all freelancing portals serve you with this unique feature but Eiliana does.
ReplyDeleteCan truly relate and retain this outstanding post. Very well written. Read about dotnet training in chennai from Maria Academy.
ReplyDelete