What benefits does Webpack 5 bring to Angular 12?

Question

I updated to Angular 12 yesterday which uses Webpack 5.

The release notes blog says:

In the v11 update we added experimental support for Webpack 5. Today, we’re happy to announce that we’re releasing a production ready version of Webpack 5 support in Angular.

I'd like to know what specifically in Webpack 5 can improve my Angular project.

Unfortunately running on Windows I'm seeing much longer build times for ng serve from around 70 seconds to 106 seconds. The build time is much longer (and yes I'm using incremental builds but that first build is very important) and I'm also not seeing any reduction in bundle sizes.

I believe that the sass compiler could be partly responsible for the increased times I'm seeing. In fact using the speed-measure-webpack-plugin I was able to see a lot of time dedicated to sass-loader. Are there any plugins I can change in webpack config to help cache the sass, use a different sass loaded, compiler or something like that? I am using the @angular-builders/custom-webpack package which lets me add plugins.

The Webpack release notes get me excited, and it seems there's a lot of potential for improving build performance but unfortunately I have yet to see it with Angular and I'm getting worse results.

Isleana

Every project can have its own bottlenecks. Perhaps you could open an issue in angular github posting the details of your configuration and maybe profiler output. In the past Angular team helped us solve build time issues that way – Ruching

@Ruching I've been following a few issues there. Fortunately right now I'm working on a new portion of my application so I just commented everything else out (in a copy of angular.json). Performance is just one aspect of this - Angular tends to shield us from webpack and I don't want to miss out of other cool things that could be done with new v5 features. – Isleana

Answer 1

I understand the build time is increased for you with webpack 5. But if we talk about benefits, Angular has much to offer with webpack 5 and one of them is in terms of modularization using module federation. Webpack 5 is having an important feature of loading remote angular modules and stitching it with angular application at run time and that too without violating rules of zone.js. Its totally a game changer in javascript world. You can read more about it at Module Federation with Webpack 5. With this you can split your codebase with smaller bundle size and during runtime you can dynamically load them on demand, resulting in faster and independent deployments and maintainability.

Lehmann

are you able to use module federation with angular cli? Please share the configuration if yes! – Asquith

@SunilPandey check out this out, it covers everything. angulararchitects.io/aktuelles/… – Newmark

Answer 2

You can find some information in this thread: https://github.com/angular/angular-cli/issues/20792

Initially, v12 had performance degradation:

terser-webpack plugin V2 will only cache to disk when using webpack 4. When used with webpack 5 it uses webpacks’ caching API and is dependent on this being set to filesystem to benefit 2nd cold builds.

Version 12.1.0 has been released which contains several performance improvements. We also introduced an experimental file system cache which should improve the second/warm build quite a lot. You can opt-in using the NG_PERSISTENT_BUILD_CACHE=1 environment variable.

Marcomarconi