Angular - Error: initial exceeded maximum budget. Budget 5.00 MB was not met by 197.06 kB with a total of 5.19 MB

user_12004282 0
Viewed 19202

When I was building my Angular 12 project I got this error:

Error: initial exceeded maximum budget. Budget 5.00 MB was not met by 197.06 kB with a total of 5.19 MB

My angular.json:

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

Yet I still have the error.

How do I resolve this?

Thank.

angular
2 Answers

Your budget is 5MB but your bundle size is greater than that (5.19MB) which is causing this error. You need to increase your maximumError budget in you angular.json as follows:

            {
              "type": "initial",
              "maximumWarning": "4mb",
              "maximumError": "6mb"
            },

You can also follow few techniques to reduce the bundle sizes as much as possible:

  • Use ng build --prod --build-optimizer. For newer versions, this is done by default with ng build --prod or ng build
  • Use module lazy loading and modularize your application as much as possible.
  • You can also use Ivy rendering engine it offers better bundle sizes
  • Make sure your 3rd party dependenciess are tree shakeable.
  • Use 3rd party tools like webpack-bundle-analyzer to see what is causing bloat in your modules
  • You can also check if you files are gzipped or not
user_78368330

I think you need to define your size boundaries in the CLI configuration file, angular.json.

{
  ...
  "configurations": {
    "production": {
      ...
      budgets: [
        {
          "type": "initial",
          "maximumWarning": "4mb",
          "maximumError": "5mb" // <==== change this number because your app is 5.19 MB now.
        }
      ]
    }
  }
}

Reference: https://angular.io/guide/build#configure-size-budgets

user_43447320
Related