13

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.

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • Applying optimizations, such as minifying, _increase_ build time and _decrease_ load time. At development time, such optimizations should be removed or reduced in order to provide for faster rebuilds. That said, if it literally takes an hour to build you app with these optimizations, you have serious architectural problems. – Aluan Haddad Jun 08 '20 at 06:07
  • @AluanHaddad Am not going to agree, I don't have any architectural problem in my APP..Because it is approved by MS team. The problem is my application is very huge. more then 1000 of components are there.. The project size is huge. – Ramesh Rajendran Jun 08 '20 at 06:11
  • Are they all declared in a single `NgModule`? Do you use lazy loading? I should have qualified my statement that you _probably_ have an architectural problems. I'm sure you have an extenuating circumstance that prevents you from breaking up your application – Aluan Haddad Jun 08 '20 at 06:18
  • 1
    @AluanHaddad . We used separate/child module implementation and also implemented lazy loading. :) – Ramesh Rajendran Jun 08 '20 at 06:20
  • 1
    @AluanHaddad, I too had this issue when my project size was big.. I tried going through my architecture many times but didnot find any such issue in that. I temporarily resolved this by disabling vendor-chunk and disabling build-optimizer with aot=true – khush Jun 08 '20 at 06:22
  • @khush I think you meant to address your comment to the OP. But yes, the gist of my initial comment was exactly in that vein: disable optimizations. – Aluan Haddad Jun 08 '20 at 06:23
  • @khush Instead of build-optimizer , Try my suggestions because from angular 9 build-optimizer is default one. and its really required for prod but not needed for dev env – Ramesh Rajendran Jun 08 '20 at 06:24
  • 2
    @RameshRajendran, That's what we are saying. – Aluan Haddad Jun 08 '20 at 06:25
  • 1
    @AluanHaddad In my case it is really needed in QA env as well. In my application, we want to run a build in QA and UAT as same as prod with optimization. – Ramesh Rajendran Jun 08 '20 at 06:27
  • 1
    I think that's good practice. you can try using [caching in Webpack](https://webpack.js.org/guides/caching/) – Aluan Haddad Jun 08 '20 at 06:30
  • 1
    @AluanHaddad Really thanks for your suggestion. We also tried but **However, it can also cause headaches when you need new code to be picked up.**. The user always needs to do hard refresh :( . – Ramesh Rajendran Jun 08 '20 at 06:33
  • 1
    Well, the hash should change if the content changes if configured correctly, but I agree that caching is fraught with peril. Maybe break up your app into multiple packages. – Aluan Haddad Jun 08 '20 at 06:35
  • 1
    @AluanHaddad Yeah, that break up may be a alternate changes to reduce build time. But if it reusable, then I can go to break up some codes to a packages. but I can't break-up the code if it non reusable .Because I need to convert to package , and needs to install for every small small change. So it taking too much time for development . *Sounds good but not too loud* dude :) – Ramesh Rajendran Jun 08 '20 at 06:40
  • 1
    I agree it has tradeoffs, serious tradeoffs and won't apply to everything. However the ones you mentioned can be mitigated with a combination of symbolic links (npm link), tsconfig project references, and monorepos. – Aluan Haddad Jun 08 '20 at 06:43
  • any update regarding this ? – Ramesh Rajendran Jun 12 '20 at 14:03
  • @RameshRajendran you should put your answer as an answer and accept it, instead of adding it to the question. - Also, more information on how you performed the analysis might be useful to others. – rooby Jun 14 '22 at 03:20
  • @rooby I did, but it's getting negative votes. So that I deleted. Now I have undeleted for your request. – Ramesh Rajendran Jun 17 '22 at 14:01
  • @RameshRajendran Oh sorry, I think I misunderstood the question originally. I was thinking that the answer was all the sections below the problem, e.g. What I Analyzed, How I fixed, Additional Tips, Result. I didn't realise until now that those were part of the question. – rooby Jun 18 '22 at 05:31

1 Answers1

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

Krunal Limbad
  • 1,533
  • 1
  • 12
  • 23