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?

Try compressing your images in assets instead of editing the angular.json file — Muhammad Ahsan, Jun 25 '19 at 16:29
@Ahsan that's what I did. Still the same message. Not sure it's about assets. — Emeric, Sep 15 '19 at 16:11

score 960 · Accepted Answer · edited Oct 21 '20 at 08:43

960

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:

edited Oct 21 '20 at 08:43

observer

2,925
1
19
38

answered Jan 01 '19 at 13:50

yurzui

205,937
32
433
399

5

@StackOverflow Added – yurzui Jan 16 '19 at 06:49
3

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? – Stack Overflow Jan 16 '19 at 06:57
3

@StackOverflow Was added in `@angular/cli@7` See also what's new in ng7 here https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c `With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI.` – yurzui Jan 16 '19 at 06:58
133

how to optimize to decrease the used-budget size? instead of increase it... – Hassan Faghihi Jun 27 '19 at 09:18
3

@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. – Mauricio Gracia Gutierrez Jul 11 '21 at 23:07

score 12 · Answer 2 · edited Oct 19 '21 at 13:59

12

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

edited Oct 19 '21 at 13:59

Dharman

30,962
25
85
135

answered Oct 19 '21 at 13:54

Jorge Guerra Pires

544
7
24

score 11 · Answer 3 · edited Oct 29 '22 at 14:47

11

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

edited Oct 29 '22 at 14:47

Henry Ecker

34,399
18
41
57

answered Oct 06 '22 at 14:08

Basavaraj SK

245
3
3

score 3 · Answer 4 · edited Sep 28 '21 at 13:26

3

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

edited Sep 28 '21 at 13:26

bad_coder

11,289
20
44
72

answered Sep 28 '21 at 11:20

Sayan Atta

55
1
1

13

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. – Ε Г И І И О Oct 03 '21 at 17:48

score 3 · Answer 5 · answered May 18 '23 at 23:35

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.

WARNING in budgets, maximum exceeded for initial

5 Answers5

What does budgets mean?

Linked