admin 管理员组

文章数量: 1086019

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
Share Improve this question edited Feb 18, 2021 at 15:49 Ahmad Habib 2,4103 gold badges16 silver badges33 bronze badges asked Feb 18, 2021 at 15:44 savantCodeEngineersavantCodeEngineer 992 silver badges8 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 6

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

本文标签：

Error[2]: Invalid argument supplied for foreach(), File: /www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm, Line: 58
File: /www/wwwroot/roclinux.cn/tmp/route_read.php, Line: 205, include(/www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm)
File: /www/wwwroot/roclinux.cn/tmp/index.inc.php, Line: 129, include(/www/wwwroot/roclinux.cn/tmp/route_read.php)
File: /www/wwwroot/roclinux.cn/index.php, Line: 29, include(/www/wwwroot/roclinux.cn/tmp/index.inc.php)

版权声明：本文标题：javascript - 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 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744068902a2528125.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。