WARNING in budgets, maximum exceeded

Question

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

WARNING in buckets, maximum exceeded error occurs.

It's part of the original anlar.json

      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]

The problem has been resolved by modifying this part.

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

But I wonder if it's okay to suddenly increase the maximum warning capacity like this.

I can't find this part even if I look at the angular official document, so if anyone knows about this issue, I'd appreciate it if you could help me.

It's part of the original anlar.json

      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]

The problem has been resolved by modifying this part.

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

For me, it's ok. The only say Angular is that your application can spend a large time to load. If you need change it because you have a large library you need use in a few components use lazy load if you can. e.g. you need a graphic library that use in one part of your application. If this part is not essencial (I imagine show an stadistic) put in a module apart and use [lazy load](https://angular.io/guide/router#lazy-loading) — Eliseo, Jan 27 '23 at 06:58
I think you need to check which component/chunk is consuming how much space.Please visit this link to analyze the build(https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack) — Parth Raval, Jan 27 '23 at 07:15
@jhonsina your text says "WARNING in buckets", your title says "WARNING in budgets"? — robertklep, Jan 27 '23 at 07:33

score 1 · Accepted Answer · answered Jan 27 '23 at 07:08

TL;DR: it is usually okay. It won't break the application if you increase the budget, but it might potentially increase website load times. Below I explain how.

These warnings (and errors, if error budget is exceeded) are purely for developers guidance reasons. These are to prevent developers from writing oversized components, encourage them to split to multiple smaller components, use lazy-loading and other Angular optimization features. Doing this also ensures faster website loading times, code reusability, and components following single responsibility.

If you are breaking the default limit, your component is potentially doing too much (either literally, or code is not split up enough). OR, you have very extensive CSS.

WARNING in budgets, maximum exceeded

1 Answers1