Application Size Budget

Let's explore how we can set an application size budget in the angular.json file.

Setting an application size budget

Another option for reducing the size of the download the browser needs to make, is to set an application size budget. This is where we can configure a size for the application that we think is the maximum, and during the build process, if our application has grown close to this maximum size, the Angular CLI will warn us.

During the development of an application, we add more and more packages and code as the app grows. This all leads to a final compiled file size that the browser needs to download. The larger the file, the longer the browser will take to download, and the longer it takes for our application to be ready to start (this is especially an issue on mobile devices).

In the angular.json file, under the configuration section, we can set an array of budgets (line 55):

Get hands-on with 1200+ tech skills courses.