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**.
