659

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?

Improve this question
2
  • 7
    Try compressing your images in assets instead of editing the angular.json file Commented Jun 25, 2019 at 16:29
  • @Ahsan that's what I did. Still the same message. Not sure it's about assets. Commented Sep 15, 2019 at 16:11

5 Answers 5

Reset to default
1115

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks @yurzui 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?
@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.
how to optimize to decrease the used-budget size? instead of increase it...
@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.
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
25

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" } ]
Improve this answer

Comments

23

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! } ]
Improve this answer

Comments

16

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.

Improve this answer

Comments

6 
"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" } ]
Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.