How to Fix "WARNING/ERROR in budgets, maximum exceeded for initial" in Angular.js

In Angular, we can set boundaries for the size of our application. If we know that our bundle, or compiled JavaScript files, should be under 2MB, then we can set the expected size of the bundle.

This is the where the Angular CLI budgets come in.

We can set the build to return a warning or even an error when the bundle size becomes unwieldy.

In our angular.json, we should have a budgets keyword.

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

We can increase maximumWarning and maximumError to our liking.

However, it might be smart to analyze our bundle to optimize our budget usage.

Quick Analysis of Angular Bundle

A very useful tool we can use is the Webpack Bundle Analyzer, which is a Webpack plugin to visually and interactively represent bundle content.

If we have a third-party package that is massive, we’ll easily see it here, and then maybe we can find lighter alternatives.

1. Install the package: npm install -g webpack-bundle-analyzer
2. Run the build (without --prod): ng build --stats-json or ng build --statsJson=true
3. Run the analyzer: webpack-bundle-analyzer ./dist/stats.json
4. Wait for the browser to open http://localhost:8888