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

Answer 1

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.