Why you should Configure Size Budgets in your Angular Application

Our applications grow when we write a lot of functionality, which also grows our application size. Angular CLI has a feature called Size Budget which will allow us to set the size threshold to ensure that our application remains within the size boundaries.

It allows us to define the size of the bundle which gets produced by the build process. The budgets are in our hand and thus we can configure our own threshold for conditions and based on that Angular will throw the Warning or Error.

Warning in budgets, maximum exceeded for total scripts.
Error in budgets, maximum exceeded for total scripts.

In my opinion its always better to apply the budgets in the prod because you will know the true size (after applying optimizations and code minimization) of your application after the production build.

You can configure the budget in the angular.json, in a budgets section for each configured environment like below :

"configurations": {
  "production": {
     ...
     "budgets": [
       "type": "all",
       "baseline": "5mb"
       "maximumWarning": "3mb",
       "maximumError": "5mb"
     ]
   }
}

The "type" property is the type of budget like a bundle, initial, allScript, all, anyComponentStyle, anyScript, any. We have given all because we want the size of the entire app.

maximumWarning - The maximum threshold for warning
maximumError - The maximum threshold for error

The warning and error properties specify how much can the bundle size deviates from its baseline.

Now we have seen how you can set the warning or error for the size, it's up to you to keep the size of the application less. One good place to look is to use a webpack-bundle-analyzer which visualizes the size of webpack output files with an interactive zoomable treemap.

It helps you in the following way :

1. Realize what's really inside your bundle
2. What modules make up the most of their size
3. Modules that got there by mistake and shouldn't be there
4. Optimize it

How I found the Budgets Helpful

Recently I was trying to add Social Plugins in my app and I was trying different packages for that. Once I settled for one package but forgot to clean up the other packages. Now the budget will come in handy because it will complain that I have exceeded the budget limit and thus I can safely remove those unused plugins.

In Conclusion, Angular Budgets are great, we can use it to keep our app lean as much as possible.