Angular 7, Warning in budget, maximum exceeded, didn't get what is wrong?

user_10046099 0
Viewed 11471

I have a angular 7 app.

When I build project with --prod, I have a warning in budgets.

angular.json

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/tbc-capital-web",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/env.js",
          "src/web.config"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [],
        "es5BrowserSupport": true
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": true,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ]
        }
      }
    },

Build output image:

enter image description here

The thing is I can't understand what is wrong here.

Non of the files are more then 2mb.

Question 1: Which generated file (or files) triggers this warning?

Question 2: How can I fix this without increasing warning size in angular.json

It will be great if you provide not just answers but little explanations to.

angular7 angular webpack bundle
2 Answers

To keep it simple, the budget could be defined as the target build size not to overcome when you build the application.

It can be used for hosting, for instance, on Heroku : when you host on such services, you have a free service that is limited, so you would like not to overcome it so that you don't have to pay.

The budget is the total size of all your files combined, not the size of your largest file.

You can ignore this most of the time, this is really a deployement issue : it's just that the CLI includes this budget by default.

To remove it, you can go into your angular.json package and find this : 

          "budgets": [{
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          }]

Simply change the values and it won't pop a warning again !

Admin1
user_68686800
Related