Limiting the application bundle size

As developers, we always want to build impressive applications with cool features for the end user. As such, we end up adding more and more features to our Angular application – sometimes according to the specifications and at other times to provide additional value to users. However, adding new functionality to an Angular application will cause it to grow in size, which may not be acceptable at some point. To overcome this problem, we can use Angular CLI budgets.

Budgets are thresholds that we can define in the angular.json configuration file and make sure that the size of our application does not exceed those thresholds. To set budgets, we can use the budgets property of the production configuration in the build command:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb...