How Did Angular CLI Budgets Save My Day And How They Can Save Yours

Tomas Trajan
Aug 7, 2018 · 7 min read
Too little or too much of anything can be bad for you! 😉 (Original 📸 by Patrick Fore)

What Are We Going To Learn?

  1. What are the Angular application budgets
  2. What kind of problems can be discovered by using budgets
  3. How can budgets help with these problems
  4. What are the tradeoffs ( cost of using budgets in your application )
  5. How to prevent problems uncovered by budgets to ever happen again

What is Angular CLI Budgets?

Budgets is one of the less known features of the Angular CLI. It’s a rather small but a very neat feature!

How To Define A Budget?

Angular budgets are defined in the angular.json file. Budgets are defined per project which makes sense because every app in a workspace has different needs.

Example of a budgets defined for an app in angular.json file.

Follow me on Twitter to get notified about the newest Angular blog posts and interesting frontend stuff

What Can Go Wrong?

Ok, our budget configuration is in place and we start working on some new feature. After some hours we try to run the prod build and get an output like this…

Example of a Angular CLI budgets build error
  1. Our tooling can go wrong and perform a bad auto-import, or we pick bad item from the suggested list of imports
  2. We might import stuff from lazy modules in inappropriate locations
  3. Our new feature is just really big and doesn’t fit into existing budgets
  4. Something else? Please, share stuff which has caused Angular budgets errors in your applications using the article responses ✏️😉

How Will Budgets Help?

Our bundle size has increased significantly and we can be pretty sure that something went wrong. What can we do to debug this problem in greater detail? Enter Webpack bundle analyzer or for the more practical-minded folks, npm i -D webpack-bundle-analyzer.

Example of comparing outputs of the webpack-bundle-analyzer for discovering of the bad imports that cause significant bundle size increase
Example of a bad RxJS import that increased bundle size by more than 150kb

Budgets Sound Great, What Is The Catch?

As the popular saying goes, nothing is for free…

Especially in the field of software engineering, every decision we make results in some kind of a trade-off. So what is the cost of maintaining budgets? To keep it short, it’s pretty low…

Budgets with reasonably set warning and error thresholds shouldn’t get triggered during the course of a normal development

Adding a new minor feature or fixing a small bug will probably NOT result in tens of kilobytes of extra bundle payload.

  1. It can lead into a team discussion about how to address the need for this specific functionality (eg do we really need to add a dependency or would it be easier to implement it ourselves?)

Permanent Solution To Problems Found By Budgets

In our previous example, the budgets were catching bad RxJS import which caused huge increase in the bundle payload size. Removing the bad import fixes current problem but doesn’t really help with any future occurrences of similar problems.

Tslint rule import-blacklist is great for preventing undesired imports in the whole workspace

Angular budgets are great! Use them and keep your apps lean and fast!

That’s It For Today!

I hope you enjoyed this article! Please support this guide with your 👏👏👏 to help it spread to a wider audience 🙏. Please, don’t hesitate to ping me if you have any questions in the article responses or on Twitter @tomastrajan

And never forget, future is bright

Obviously the bright future (📷 by Chris Barbalis)

DailyJS

JavaScript news and opinion.

Tomas Trajan

Written by

🅰️ Google Developer Expert for Angular #GDE ❤️ ️Typescript 🛠️ Maker of the @releasebutler and Medium Enhanced Stats 🌞 Obviously the bright Future

DailyJS

DailyJS

JavaScript news and opinion.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade