Make Your Build Faster in Angular v12

Angular v12.1.0 introduces a new experimental option to make subsequent builds faster by leveraging the Webpack’s filesystem cache feature and use it for the generated modules and chunks.

To enable it, we can set the NG_PERSISTENT_BUILD_CACHE=1 environment variable before running the ng serve or ng build commands:

After running the command, you should see the .cache folder inside your node_modules:

I was curious to see how much time it’ll save and benchmarked it on a new Angular project:

Subsequent builds were twice as fast! 🔥🔥🔥

First build: 16s

Second build 7s!

🚀 In Case You Missed It

Here are a few of my open source projects:

• Akita: State Management Tailored-Made for JS Applications
• Spectator: A Powerful Tool to Simplify Your Angular Tests
• Transloco: The Internationalization library Angular
• error-tailor — Seamless form errors for Angular applications
• Forms Manager: The Foundation for Proper Form Management in Angular
• Cashew: A flexible and straightforward library that caches HTTP requests
• Error Tailor — Seamless form errors for Angular applications

And many more!

Follow me on Medium or Twitter to read more about Angular, Akita and JS!