Webpack 3 vs Webpack 2

In this post I will do a comparison between Webpack 3 and Webpack 2.

My chief complaints about Webpack have always been extra function wrappers per bundled module, and no support for tree shaking.

Tree shaking is still not supported, but with Webpack 3, we no longer suffer the overhead of extra functions wrappers.

Tree shaking is not necessarily on the critical path since you can always code around this limitation by enforcing a single statement per module. In practice this means only one statement per source file (e.g. class). I explain this a bit more here.

Removing function wrappers may not translate into huge savings on bundle sizes, but more importantly, it improves runtime performance.

The secret to removing the function wrappers is adding the new plugin ModuleConcatenationPlugin like so:

To test the impact of this, I have bundled a medium size Angular application using both Webpack 2 and Webpack 3.

Both applications can be found here:

Bundle Size

The easiest metric to measure is bundle size.

After gzip the bundle sizes are 151k and 149k for Webpack 2 and Webpack 3 respectively. The size difference is not huge, but still, we are seeing a decrease of 2k (1.3%).

JavaScript Performance

My next experiment is measuring actual JavaScript performance in the bundles.

To get performance readings I am using a site called WebPageTest.org.

The experiments are run on a low end device (iPhone 5c IOS9) since performance differences are more noticeable when testing on underpowered hardware.

You can find the full performance reports here:

I have also summarized some key readings in the table below:

As you can see, Webpack 3 performs slightly better in all categories. The difference in performance is not mind blowing, but there is improvement nonetheless.

The source code for the application can be found here.