In this post I will evaluate the most common Angular bundlers to see how they compare in terms of bundle size.

The bundlers I will evaluate are Browserify, Parcel, Rollup, Webpack and the Closure Compiler.

Disclaimer: I have tried to make this comparison as fair as possible, but if there are optimizations I’ve missed for a particular bundler, feel free to reach out to me. Better yet, make a PR with a proposed optimization to my repo.

If you want to try it yourself, here are instructions for how to trigger the different builds.

All sample applications can be found here:

Webpack
Rollup
Parcel
Browserify
Closure Compiler

Browserify

Browserify is a very easy bundler to use (no configuration). The downside is that it assumes commonJS, which is harder to statically analyze. As a result we are unlikely to see build time optimizations like tree shaking when using Browserify.

Browserify weighs in at 175k.

Rollup

Rollup improves on Browserify by adding more build time optimizations like tree shaking. Rollup requires ES2015 modules since it’s easier to statically analyze and optimize (e.g. tree shake).

Rollup weighs in at 149k

Webpack

Webpack is probably the most widely used bundler for large Angular applications today. It is also currently the backing bundler for the Angular CLI. This means it benefits from an ecosystem of Angular specific build optimization plugins. As a result, Webpack weighs in at a skinny 126k.

Update: Igor Minar from the Angular team pointed out that my initial implementation was not using the esm distribution of rxjs. I was also not setting pure_getters to true, or making multiple Uglify passes (3 passes was suggested).

By making these additional optimizations I was able to shave off another 5k. The new bundle size is 121k.

Webpack also supports a feature called code splitting. This means you can spread the loading of the application across multiple requests (lazy loading). Here is a sample app where I make use to code splitting.

ParcelJS

Parcel is a no configuration bundler. It’s probably the easiest bundler I’ve ever used since it doesn’t seem to impose any restrictions on module format. I have not looked into what it does under the hood, but I am impressed with the way it abstracts all the complexities of bundling.

Parcel weighs in at 186k.

Closure Compiler

The Closure compiler is the gold standard of JavaScript bundling. No other bundler comes close in terms of bundle size. This is because it does way more than just simple module bundling.

The Closure compiler will run a much deeper analysis of your application, and often rewrite it to simplify the code.

The Closure compiler weighs in at an impressive 97k.

Below is a table of all the results:

Bundler Size (kb)
Closure 97
Webpack 121
Rollup 149
Browserify 175
Parcel 186