WARNING in budgets, maximum exceeded for initial

Question

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?

Dolt

Try compressing your images in assets instead of editing the angular.json file – Edmonds

@Ahsan that's what I did. Still the same message. Not sure it's about assets. – Throughway

Answer 1

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:

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Performance Budgets (Keep Request Counts Low And File Sizes Small)

Angulo

Thanks @Angulo for your quick answer, Is it new feature in angular 7? We didn't see this error in angular 5. Does it means we are doing something wrong? – Affiance

@StackOverflow Was added in @angular/cli@7 See also what's new in ng7 here blog.angular.io/… With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI. – Angulo

how to optimize to decrease the used-budget size? instead of increase it... – Antiseptic

@deadManN I guess avoiding including a whole npm package just to call one method or find alternatives with lighter foot-print or implementing your own logic just for the needed part. – Feature

In vite you can config manualChunks to split your bundles. That's easy and straight forward. But in angular it feels like a pain. ChatGPT suggested to config webpack and use a custom webpack builder. This is incredible complicated. Or use lazy loading in routes for some components, but it didn't reduced the bundle size. So I found no solution @hassan – Laurence

Answer 2

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! 
   }
]

Infelicitous

Answer 3

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"
       }
    ]

Monterrey

Answer 4

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.

Abstractionism

Answer 5

"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" } ]

Polonaise

Silencing the alarm forever is not a good practice. At least set them to sane limits. I don't think you'll want your app to become a 20mb monster before the compiler warns about it. – Oscitancy

Answer 6

This resolve my issue

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

Ovation