Speed Up Angular Dev With Cache
Angular is about to release v13!
13 days until... 😉— Angular (@angular) October 22, 2021
One of the new features that excites me the most is the persistent build cache. In v12.1, this feature was introduced as an opt-in by the CLI via an environment variable
NG_PERSISTENT_BUILD_CACHE=1. Now this environment variable has been disabled. Instead, this caching feature is now enabled by default and can be configured inside
angular.json under the
cli option. If you want to learn more about this feature, here is the RFC discussion.
How to enable it (in Angular 13+)?
At the time of writing, this configuration is enabled only on V13, which is currently in RC stage. You can try it out by upgrading your project with
ng update --next.
After upgrading to 13.0.0-rc1, open your project’s
angular.json, which should normally look like this:
cli option can be configured like this:
There are three options under
enabled which is a boolean,
environment which is one of
path which is a string that points to your cache on disk. If your
CI can reuse the same file directory between runs and disk space is not a problem, definitely configure the
environment option to
all. Some users have reported massive reduction in build time (details in this RFC). The default location of cache is
.angular/cache. However, I am not sure about the default for
environment as it’s not configured in the
My personal project is a pretty simple one but you can still get a good sense of the dramatic improvement. Just a FYI, the project uses TailwindCSS in JIT mode.
TAILWIND_MODE=watch ng serve --hmr
Amazing! 🎉 For
ng build, I am able to achieve a whopping 66% build time reduction for the second run, with the cost of the first run being slightly slower. For
ng serve, it’s a similar story where I am able to cut the time by over 50% starting from the second run.
This a cool productivity boost and at the same time a huge CI cost saver. As mentioned, you can enjoy this feature in Angular 12.1+ already, with
NG_PERSISTENT_BUILD_CACHE=1 command line argument. However, in Angular 13+ you should configure it in your
angular.json. If you are not using it already, you definitely should. NOW! 🚴♂️💦💦
As always, thanks for reading!