When building an Angular application, things are usually pretty smooth. However, as time goes by and your application is growing, a strange warning may appear:
When first encountered this can raise some questions:
- How can I disable this warning?
- How can I troubleshoot what is making my bundle so big?
- And what on Earth is a budget?
Let's answer them!
The Angular budget
The budget is the term employed by Angular to represent the ultimate size of your application that you will still consider "normal".
For example, you may accept that the bundle of your application will be at most 2MB but more will be strange and over 5MB should not be acceptable.
Thanks to this notion, you can configure this behavior straight into the your project by setting the budget of your application in your angular.json
:
{
// ...
"architect": {
"build": {
"configurations": {
"production": {
"budgets": [ ]
}
}
}
}
}
However there is more than just one type of budget and you may want to set those threshold for ...
- ... the entire application
- ... any generated bundle
- ... the size of the JavaScript needed for bootstrapping the application
- ... the size of all or any of the scripts
- ... the size of any component style sheet
- ... the size of any file
For each one of those types, you can specify on beyond which threshold you want to have warning or an error.
The threshold values accept a variety of units such as bytes (b
), kilobytes (kb
), megabytes (mb
) or even percentages (%
) if you specified a baseline value.
For example, here is a budget to have a warning when the size of the app is over 500kB and an error when it is over 50% more than 1MB:
"budgets": [
{
"type": "all",
"baseline": "1mb",
"maximumWarning": "500kb",
"maximumError": "150%"
}
]
Getting rid of the warning, the quick'n dirty way
Knowing this, the easiest and the quickest way not to have this warning is to increase the limit to a higher number.
You could either discuss what it should be in the context of the project you are building, simply set it to an indecent number or even just delete those lines:
"budgets": [
{
"type": "initial",
"maximumWarning": "999mb",
"maximumError": "999mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "999mb",
"maximumError": "999mb"
}
],
This may, however, not really be a solution but more like hiding the problem under the carpet.
Getting rid of the warning, the proper way
The first step in optimizing something is understanding what can be improved and what is dragging you back.
Bundle optimization is not really different in this case: let's see what our bundle is made of!
Generating the proper bundle
When you are building your application, Angular is generating several chunks of JS that, together, contain your web page.
Using the production mode, you will also benefit from the Angular compiler's optimizations in order to have a lighter bundle.
A good way to truly understand what your final build will contain is to visualize this optimized bundle and getting ride of what might have been only dev dependencies.
However, if we try to visualize this bundle we wouldn't be seeing any useful because Angular does not generate source maps nor named chunks in production mode.
To solve this, we can simple specify those option to the bundle we would like to inspect:
~$ ng build --source-map=true --named-chunks=true
Visualizing your bundle
Our bundle generated, we can now get the proper tool to help us inspecting it.
Among others source-map-explorer is exactly such a tool and describes itself as such:
The source map explorer determines which file each byte in your minified code came from. It shows you a treemap visualization to help you debug where all the code is coming from.
This looks promising! Let's grab the NPM package and add it to our dev dependencies:
~$ npm i -D source-map-explorer
You may also want to have everything integrated with Angular. In that case, check the Builder To Run Source Map Explorer which allows you to do so without configuration and from your Angular app using the builder.
At this point, we can also create a new npm script as a shortcut for this operation in the package.json
:
{
// ...
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"sme": "ng build --source-map=true --named-chunks==true && source-map-explorer dist/<YOU_APP_NAME>/**/*.js"
},
// ...
}
If everything went well, a new tab in your browser should open itself and display something like this:
From this view, you can actually see what is bundled in your app and the size it takes.
The screenshot is taken from a very lightweight Angular app, yours will surely be much more complex.
Taking actions
Now that you can actually see what your bundle contains, you can take some actions reduce it and there can be plenty of reasons why it is bigger than expected:
- Maybe a dependency has a surprisingly big size and there is other ways to use it that you missed
- Maybe a dependency that should have only be a dev one is a global one
- Etc.
Good practices
The best behavior to spare you some time and avoid this uncomfortable situation is to take actions beforehand.
When working on your project ...
- ... be careful what dependencies you are using and if you really need them
- ... take advantage of how Angular works to lazy load your modules and thus lighten the main bundle
You may also want to consider using standalone components as this new paradigm forces you to explicitly declare what your component will be using, allowing you to import only the strict necessary.
I hope that you learned something useful there, and wish you a happy coding!
Sources
- Angular.io - Configuring size budgets
- Stack Overflow - WARNING in budgets, maximum exceeded for initial
Photo by Callum Parker on Unsplash
Top comments (4)
Good article explaining something absolutely necessary for good Angular development, but not extensively documented.
P.S.
Get "rid", not "ride". 🙂
Thanks for the feedback and the typo is fixed!
Very informative, thanks 👍.
advanced concept of angular.