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

Issue

When I was building my Angular-12 peroject 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?

Thanks

Solution

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
• 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

Answered By - deepakchethan