Limiting the Size and Optimizing the Application Bundle

As we add more and more features to an Angular application, the final bundle will grow bigger at some point. We will learn how to mitigate such an effect using budgets.

Managing application size with Angular CLI budgets

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: