Reduce the build time in a large Angular 8

Question

It is taking almost 10-15 minutes to build the project in the production mode and the dist folder size is 32MB

these are the production options that I am using:-

"production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        }

I am running following command to build the project:-

node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod --source-map=false --named-chunks=false --statsJson=false

PS: I already tried with Ivy. It is not supporting legacy code hence, failing the build.

Any help will be much appreciated. thanks.

i checked my prod config in angular.json it looks very similar to yours. the only difference is this: `"budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ]` — spierala, Dec 03 '19 at 13:04
why dont you use `ng build...` ? and is `ng serve` also slow? — spierala, Dec 03 '19 at 13:10
@spierala no ng serve is not slow. only ng build --prod is slow — siddharth shah, Dec 04 '19 at 06:41

score 3 · Answer 1 · answered Apr 26 '21 at 15:01

Here are some basic steps

Reduce the number of libraries that your app imports
Ensure that all important libraries are in FESM/ESM format and not UMD/CommonJS format
Reduce the amount of Sass/Less that your app imports
Verify that you aren't importing/generating duplicate styles (1)
Break your app up into more modules and further investigate the largest/slowest modules
Break parts of your app out into libraries (and consider pointing your path mappings to the dist/ version of your libs
Reduce the size and number of assets used by your app
Some versions of Angular or the CLI have regressions in this area, the latest 8.3.x or 11.2.x is recommended
Reduce the number of circular module and library dependencies in your app

If you do all of this and your prod builds are still over 10 minutes, I'd suggest looking into Nx incremental builds.

If you get that all set up and your builds are still too slow and you have multiple teams working on your app, then you may want to look into Module Federation.

score 0 · Answer 2 · answered Dec 03 '19 at 11:47

0

Check the stack answer of the Previous Questions

ng build --source-map=false

Hope this will helps... !!

answered Dec 03 '19 at 11:47

DeC

2,226
22
42

thanks,I have already added that option in my following query:- node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod --source-map=false --named-chunks=false --statsJson=false – siddharth shah Dec 03 '19 at 11:55
it doesn't help much – siddharth shah Dec 03 '19 at 11:55
Please let me know if you have any better solution – siddharth shah Dec 03 '19 at 12:08
sorry ...!! , will check and let you know...!! – DeC Dec 03 '19 at 12:10

score 0 · Answer 3 · answered Jan 10 '20 at 11:22

0

You could try webpack Bundle Analyzer to see if you have some large bundles generated...

https://alligator.io/angular/bundle-size/

answered Jan 10 '20 at 11:22

spierala

2,349
3
25
50

score -1 · Answer 4 · answered Dec 03 '19 at 14:54

-1

you can disable "optimization", "aot" and "buildOptimizer" for faster build. but that may make the dist folder size even worse.

answered Dec 03 '19 at 14:54

Mohamed Samir

14

yes. thats the whole point, I would like to keep the optimization too – siddharth shah Dec 04 '19 at 06:43

Reduce the build time in a large Angular 8

4 Answers4