Setting budgets with the new Angular CLI
The weight of our scripts is something that we all know is extremely important to look after, but at the same time it’s not the first thing that we look for when developing our apps. In the end, you have to focus on your functionality, your tests passing, etc.
With the new 1.7 release of @angular/cli we now have a possibility to add a “weight watcher” for our scripts. Now, take a note, because…
It is so easy you really have no excuse not to do it :)
First thing to make sure is that we have @angular/cli: "1.7.0" installed in our local dependencies. After that we go to the .angular-cli.json file and, in the app configuration, section we add the"budgets": setting.
Where we go from here depends on our specific needs, but here are some common scenarios that you might find useful for your case:
If you just want to limit the overall app size, you can either go with setting the"allScript" or "all" as a type of budget. Then you can set your "maximumWarning" level, "maximumError" one, of both (you can also set corresponding"minimum" levels if you’re into that sort of things).
Reasonably, budgets are being checked only when we build the app.
And the build will fail if any error level is exceeded.
You can also set the budget type as "any" or "anyScript"and the values for error/warning levels can be set in bytes (by default, if no unit given), kilobytes or megabytes. As the time of writing (cli version 1.7.0) you can’t set the fraction part, it just won’t read the number at all — so I’d stick with bytes/kilobytes.
Finally, you can set a budget for specific bundle. In that case, we’ll need to provide the bundle’s name as well.
The last way of describing bounds the sizes that we decide to accept is to provide a "baseline" value and margin of tolerance for it (again: "error", "warning" or both). This one can be set with a specific absolute unit or a percentage of the baseline value.
This actually covers most of the available options. You can check the summary of them in the docs. Now go ahead and set your budgets, it’s that easy! ⚖️
