Limiting the Size and Optimizing the Application Bundle
Learn how to optimize and limit the size of an application bundle using the budget property.
We'll cover the following...
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:
"budgets": [{"type": "initial","maximumWarning": "500kb","maximumError": "1mb"},{"type": "anyComponentStyle","maximumWarning": "2kb","maximumError": "4kb"}]
The Angular CLI does a pretty good job of defining default budgets for us when creating a new Angular CLI project.
We can define a budget for different types, such as the whole Angular application or some parts of it. The threshold of a budget can be defined in bytes, kilobytes, megabytes, or a percentage of it. The Angular CLI displays a warning or throws an error when the size is reached or exceeds the defined ...