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

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

• javascript
• angular
• typescript

• 1 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 Commented Dec 3, 2019 at 13:04
• why dont you use ng build... ? and is ng serve also slow? – spierala Commented Dec 3, 2019 at 13:10
• can you check in the dist folder which files are so big? – spierala Commented Dec 3, 2019 at 13:19
• 10 - 15... parsecs? – crashmstr Commented Dec 3, 2019 at 14:56
• @crashmstr 15-15 minutes – siddharth shah Commented Dec 4, 2019 at 6:40

4 Answers 4

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 remended
• 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.

Check the stack answer of the Previous Questions

ng build --source-map=false

Hope this will helps... !!

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

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

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