CODEWITHSUNDEEP
javascriptangulartypescript
siddharth shah
siddharth shah

Reputation: 1147

Reduce the build time in a large Angular 8

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.

Upvotes: 4

Views: 6396

Answers (4)

Splaktar
Splaktar

Reputation: 5894

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.

Upvotes: 3

spierala
spierala

Reputation: 2699

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

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

Upvotes: 0

Mohamed Samir
Mohamed Samir

Reputation: 14

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

Upvotes: -1

Chathuran D
Chathuran D

Reputation: 2430

Check the stack answer of the Previous Questions 

ng build --source-map=false

Hope this will helps... !!

Upvotes: 0

Related Questions