I have an angular application upgraded to 11.

And I do a > ng build --prod

And I see this information:

√ Browser application bundle generation plete.
√ ES5 bundle generation plete.

Initial Chunk Files                      | Names                |      Size
scripts.3cf268d47c462590e7d9.js          | scripts              |   3.27 MB
main-es5.9973d9ddec6de2b044ba.js         | main                 |   2.49 MB
main-es2015.9973d9ddec6de2b044ba.js      | main                 |   2.36 MB
styles.d540d930321db4c962dc.css          | styles               | 245.64 kB
polyfills-es5.259ae27e17f48bc03647.js    | polyfills-es5        | 131.80 kB
polyfills-es2015.732b81c0b5a3e3dbb1bc.js | polyfills            |  36.16 kB
runtime-es2015.a4dadbc03350107420a4.js   | runtime              |   1.45 kB
runtime-es5.a4dadbc03350107420a4.js      | runtime              |   1.45 kB

                                         | Initial ES5 Total    |   6.13 MB
                                         | Initial ES2015 Total |   5.91 MB

Build at: 2021-02-18T14:49:39.581Z - Hash: 0e159b0e28a5a4f69881 - Time: 144004ms

But I also get this error:

Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB.

But I already changed the budget size some time ago:

 "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]

Of course, I could again increase the size. But of course, that is not what you want to do.

And this is my pacakge.json file:

{
  "name": "dashboard-frontend",
  "version": "0.0.0",
  "sideEffects": false,
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "build": "ng build --stats.json --prod=true --deleteOutputPath=false",
    "test": "ng test",
    "lint": "npm run lint.eslint && npm run lint.prettier && npm run lint.types",
    "lint.eslint": "eslint . --ext ts",
    "lint.prettier": "prettier -c src/**/*.ts",
    "lint.types": "tsc --noEmit",
    "e2e": "ng e2e"
  },
  "private": true,
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "dependencies": {
    "@angular-material-ponents/datetime-picker": "^5.0.3",
    "@angular-devkit/build-angular": "^0.1102.1",
    "@angular/animations": "~11.2.1",
    "@angular/cdk": "10.2.7",
    "@angular/mon": "~11.2.1",
    "@angular/piler": "~11.2.1",
    "@angular/core": "~11.2.1",
    "@angular/elements": "11.2.1",
    "@angular/forms": "~11.2.1",
    "@angular/material": "10.2.7",
    "@angular/material-moment-adapter": "^11.2.0",
    "@angular/platform-browser": "~11.2.1",
    "@angular/platform-browser-dynamic": "~11.2.1",
    "@angular/router": "~11.2.1",
    "@fortawesome/angular-fontawesome": "0.7.0",
    "@fortawesome/fontawesome-svg-core": "1.2.30",
    "@fortawesome/free-solid-svg-icons": "5.14.0",
    "@mapbox/mapbox-gl-geocoder": "4.7.0",
    "@types/jest": "^26.0.15",
    "@types/mocha": "^8.0.4",
    "angular-auth-oidc-client": "^11.2.0",
    "angular-gridster2": "10.1.6",
    "angular-plotly.js": "3.0.0",
    "bootstrap": "4.5.2",
    "bootstrap-icons": "1.3.0",
    "idb": "6.0.0",
    "jasmine": "^3.6.3",
    "jest": "^26.6.3",
    "luxon": "1.25.0",
    "mapbox-gl": "^1.12.0",
    "material-icons": "^0.3.1",
    "moment": "^2.29.1",
    "ngx-mapbox-gl": "4.8.1",
    "plotly.js": "1.55.2",
    "rxjs": "~6.5.4",
    "ts-jest": "^26.4.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.1",
    "@angular/cli": "~11.2.1",
    "@angular/piler-cli": "~11.2.1",
    "@angular/language-service": "~11.2.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/luxon": "1.25.0",
    "@types/mapbox-gl": "1.12.5",
    "@types/node": "^12.12.62",
    "@types/plotly.js": "^1.50.21",
    "@typescript-eslint/eslint-plugin": "^4.4.1",
    "@typescript-eslint/parser": "^4.4.1",
    "eslint": "^7.11.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^6.13.0",
    "eslint-plugin-prettier": "^3.1.4",
    "gzipper": "^4.4.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.1.2",
    "prettier-eslint": "^11.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.5"
  }
}

How to decrease the dist folder?

Thank you

I have an angular application upgraded to 11.

And I do a > ng build --prod

And I see this information:

√ Browser application bundle generation plete.
√ ES5 bundle generation plete.

Initial Chunk Files                      | Names                |      Size
scripts.3cf268d47c462590e7d9.js          | scripts              |   3.27 MB
main-es5.9973d9ddec6de2b044ba.js         | main                 |   2.49 MB
main-es2015.9973d9ddec6de2b044ba.js      | main                 |   2.36 MB
styles.d540d930321db4c962dc.css          | styles               | 245.64 kB
polyfills-es5.259ae27e17f48bc03647.js    | polyfills-es5        | 131.80 kB
polyfills-es2015.732b81c0b5a3e3dbb1bc.js | polyfills            |  36.16 kB
runtime-es2015.a4dadbc03350107420a4.js   | runtime              |   1.45 kB
runtime-es5.a4dadbc03350107420a4.js      | runtime              |   1.45 kB

                                         | Initial ES5 Total    |   6.13 MB
                                         | Initial ES2015 Total |   5.91 MB

Build at: 2021-02-18T14:49:39.581Z - Hash: 0e159b0e28a5a4f69881 - Time: 144004ms

But I also get this error:

Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB.

But I already changed the budget size some time ago:

 "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]

Of course, I could again increase the size. But of course, that is not what you want to do.

And this is my pacakge.json file:

{
  "name": "dashboard-frontend",
  "version": "0.0.0",
  "sideEffects": false,
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "build": "ng build --stats.json --prod=true --deleteOutputPath=false",
    "test": "ng test",
    "lint": "npm run lint.eslint && npm run lint.prettier && npm run lint.types",
    "lint.eslint": "eslint . --ext ts",
    "lint.prettier": "prettier -c src/**/*.ts",
    "lint.types": "tsc --noEmit",
    "e2e": "ng e2e"
  },
  "private": true,
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "dependencies": {
    "@angular-material-ponents/datetime-picker": "^5.0.3",
    "@angular-devkit/build-angular": "^0.1102.1",
    "@angular/animations": "~11.2.1",
    "@angular/cdk": "10.2.7",
    "@angular/mon": "~11.2.1",
    "@angular/piler": "~11.2.1",
    "@angular/core": "~11.2.1",
    "@angular/elements": "11.2.1",
    "@angular/forms": "~11.2.1",
    "@angular/material": "10.2.7",
    "@angular/material-moment-adapter": "^11.2.0",
    "@angular/platform-browser": "~11.2.1",
    "@angular/platform-browser-dynamic": "~11.2.1",
    "@angular/router": "~11.2.1",
    "@fortawesome/angular-fontawesome": "0.7.0",
    "@fortawesome/fontawesome-svg-core": "1.2.30",
    "@fortawesome/free-solid-svg-icons": "5.14.0",
    "@mapbox/mapbox-gl-geocoder": "4.7.0",
    "@types/jest": "^26.0.15",
    "@types/mocha": "^8.0.4",
    "angular-auth-oidc-client": "^11.2.0",
    "angular-gridster2": "10.1.6",
    "angular-plotly.js": "3.0.0",
    "bootstrap": "4.5.2",
    "bootstrap-icons": "1.3.0",
    "idb": "6.0.0",
    "jasmine": "^3.6.3",
    "jest": "^26.6.3",
    "luxon": "1.25.0",
    "mapbox-gl": "^1.12.0",
    "material-icons": "^0.3.1",
    "moment": "^2.29.1",
    "ngx-mapbox-gl": "4.8.1",
    "plotly.js": "1.55.2",
    "rxjs": "~6.5.4",
    "ts-jest": "^26.4.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.1",
    "@angular/cli": "~11.2.1",
    "@angular/piler-cli": "~11.2.1",
    "@angular/language-service": "~11.2.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/luxon": "1.25.0",
    "@types/mapbox-gl": "1.12.5",
    "@types/node": "^12.12.62",
    "@types/plotly.js": "^1.50.21",
    "@typescript-eslint/eslint-plugin": "^4.4.1",
    "@typescript-eslint/parser": "^4.4.1",
    "eslint": "^7.11.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^6.13.0",
    "eslint-plugin-prettier": "^3.1.4",
    "gzipper": "^4.4.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.1.2",
    "prettier-eslint": "^11.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.5"
  }
}

How to decrease the dist folder?

Thank you

• javascript
• angular
• typescript
• bundle
• node-modules

1 Answer 1

Sometimes when your application grows there is no other option and you have to raise the bulk size constraints in angular.json to pile.

But first you should try removing useless code, dependencies, assets, styles, etc. in order to reduce size.

Also check these tips: https://indepth.dev/posts/1217/how-to-reuse-mon-layouts-in-angular-using-router