CODEWITHSUNDEEP
angularbuildproductionng-build
Masoud Bimar
Masoud Bimar

Reputation: 7821

WARNING in budgets, maximum exceeded for initial

When building my Angular 7 project with --prod, I receive a warning in budgets.

I have an Angular 7 project. I am trying to build it, but I keep getting the following warning:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

These are the chunk details:

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

What exactly are budgets? How should I manage them?

Upvotes: 650

Views: 584404

Answers (5)

Sheikh Wahab Mahmood
Sheikh Wahab Mahmood

Reputation: 418

Go to angular.json file, under configurations->production->budgets, increase maximumWarning and maximumError more than the error is showing.

"configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "12mb",
              "maximumError": "12mb"
            }
          ]
        }
      }

I have set it to 12mb each to eliminate the warning and error messages from compiler.

Upvotes: 16

Basavaraj SK
Basavaraj SK

Reputation: 499

Please Open angular.json and check for budgets keyword, and increase/raise the maximumWarning, maximumError this should solve the issues

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

Upvotes: 24

Jorge Guerra Pires
Jorge Guerra Pires

Reputation: 632

In my case I had to change like this, the accepted solution did not work. I am using TensorFlow.js in Angular.

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", 
      "maximumError": "5mb"<=== instead! 
   }
]

Upvotes: 23

Sayan Atta
Sayan Atta

Reputation: 85

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

I used this but it does not work. Then I did this:

"budgets": [ { "type": "initial", "maximumWarning": "20mb", "maximumError": "25mb" }, { "type": "anyComponentStyle", "maximumWarning": "20mb", "maximumError": "25mb" } ]

Upvotes: 6

yurzui
yurzui

Reputation: 214255

Open angular.json file and find budgets keyword.

It should look like:

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

As you’ve probably guessed you can increase the maximumWarning value to prevent this warning, i.e.:

    "budgets": [
       {
          "type": "initial",
          "maximumWarning": "4mb", <===
          "maximumError": "5mb"
       }
    ]

What does budgets mean?

A performance budget is a group of limits to certain values that affect site performance, that may not be exceeded in the design and development of any web project.

In our case budget is the limit for bundle sizes.

See also:

Upvotes: 1097

Related Questions