Benchmarking Angular 12 with Webpack 5

·
·2 min read
Cover Image for Benchmarking Angular 12 with Webpack 5

Angular 12 has just been released! Yay!

This is a particularly long-awaited release due to the CLI using Webpack 5 by default, which comes with improved performance and tree-shaking - or at least that's the promise.

That means, faster and smaller builds. Who doesn't like that?

I took the time to benchmark 2 apps I work on, one small and another medium-sized: read on to see the results.

Notice:: The results can differ wildly given your setup and applications, so please don't take this benchmarks too seriously.

Actually, I'd love to know what your results will end up being!

Setup

The tests have been done on a Macbook Pro 2018 i7 2.2Ghz 32Gb RAM - using Node v16.

  • The Webpack 4 builds are built using Angular 11.2.12.
  • The Webpack 5 builds are built using Angular 12.0.0.

Webpack 5 vs Webpack 4: Small Application benchmark

Development Build Time

The following graph shows the results for the initial development build time.

  • Webpack 4: 30.1 seconds
  • Webpack 5: 32.9 seconds

As you can see, the new Webpack version falls behind nearly 3 seconds - which is a bit of a bummer.

Production Build Time

The following graph shows the results for the production build time. The version 5 makes up for falling behind in the development build.

Version, Time in Seconds
Webpack 4,58.1
Webpack 5,51.8
  • Webpack 4: 58.1 seconds
  • Webpack 5: 51.8 seconds

I was positively impressed by this one, 7 seconds is pretty noticeable.

Production Bundle Size

The following graph shows the results for the total production bundle size.

That means, we take into account the total size of all the initial assets (main, styles, polyfills, runtime).

The total size is not gzipped.

  • Webpack 4: 833.29kb
  • Webpack 5: 830.19kb

Webpack 5 wins the production race - although maybe not by as much as we'd all hoped!

Webpack 5 vs Webpack 4: Large Application benchmark

Development Build Time

  • Webpack 4: 74 seconds
  • Webpack 5: 84.5 seconds

10 seconds longer for starting the development build is unfortunately a lot more.

Production Build Time

The following graph shows the results for the production build time. The version 5 makes up for falling behind in the development build.

  • Webpack 4: 1 minute 37 seconds
  • Webpack 5: 1 minute 34 seconds

Production Bundle Size

  • Webpack 4: 1.961Mb
  • Webpack 5: 1.970Mb

If you want, do shoot me an email and let me know what your results will look like!

If you enjoyed this article, follow me on Twitter


Learn more about
AngularAngular

Cover Image for Principles for creating libraries with Nx and Angular
·5 min read·
AngularAngular

Working with Nx may be confusing. This article explains how I create Nx libraries and the principles behind my motivations

Cover Image for Where to put your Angular models?
·3 min read·
AngularAngular

Organizing entities and models in your Angular app may be hard. This article explains where to put your entities and what mistakes to watch out for

Cover Image for Using the Intersection Observer API with Angular
·5 min read·
AngularAngular

This article shows how to build a directive with Angular that uses the Intersection Observer API to check when an element becomes visible on the page

Cover Image for Setters vs ngOnChanges: which one is better?
·3 min read·
AngularAngular

Listening to Input changes can be done in different ways. But which one should you use?

Cover Image for Async Rendering with a single Rx Operator
·3 min read·
AngularAngular

Increase your app rendering performance with this simple Rx operator

Cover Image for 3 Ways to Render Large Lists in Angular
·6 min read·
AngularAngular

An overview of the available techniques to render large lists of items with Angular