How to reduce angular application build time?

Question

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.

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.3version 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 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 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.

What I want to know?

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 build optimization.

Answer 1

Copied Answer From : https://github.com/angular/angular-cli/issues/17874#issuecomment-640568824

ConcatenateModules is used for scope hoisting, which results in 2 things, smaller bundle sizes and faster code execution in the browser.

If really want to disable concatenateModules which is not recommended you can use ngx-build-plus.

From a CLI point of view, exposing a way to disable concatenateModules is out of scope, because we wouldn't like users to opt-out from key runtime performance and bundle size optimisations.

Read More