JavaScript bundlers are essential tools for modern web development. They handle all the routine tasks for building an application, which allows developers to focus on writing code.

However, as applications grow in size and complexity, bundling performance can become a bottleneck, slowing down the deployment process and negatively impacting the overall developer experience.

Luckily, we are now entering a new era of build tools written in high-performance languages like Go or Rust. In this article, we will compare the speed and bundle size of the most popular bundlers across various configurations.

Available options

Despite the variety of available bundlers, most of them use the same packages for transpilation and minification.

The first option is Babel and Terser, two popular JavaScript tools for transpiling and minifying code, respectively. They are often used together, and many popular toolkits such as CRA (Create React App) are based on them. While both tools have large communities and are widely used, which makes it easy to find answers to most questions, their main drawback is their speed.

The second option is Esbuild, a lightweight and extremely fast bundler and minifier developed by Evan Wallace. It also supports bundling of other web assets like CSS and images, and can be extended using a variety of plugins. Esbuild is written in Go, which enables it to be significantly faster than any JavaScript bundlers. It’s easy to configure and supports JSX syntax and TypeScript out of the box.

And last but not least, SWC is a popular compiler designed to be blazingly fast and efficient. It is written in Rust and maintained by the developer community. It can be used to transpile and minimize JavaScript or TypeScript code. Also worth noting is that the swcpack bundler is currently under active development and it has all chances to become an extremely fast alternative to Webpack.

Benchmark

The story of this performance benchmark began with an attempt to understand why it takes more than half a minute to build a relatively small application with Material UI components and how to improve that.

For tests I created several React projects:

• Empty as the baseline
• Project containing five different libraries with a large codebase commonly used in web development
• All components from Material UI
• Synthetic test with 5000 small components as a way to measure the overhead of the bundler itself

Initially, the project with Material UI components also included an icons package, but after the first measurements I found a performance degradation in Rollup, so as not to distort the final results I removed it.

To keep results accurate there are no other files that can require additional loaders or plugins, as the main goal is to measure time spent on JavaScript bundling not on CSS or other assets.

The benchmark includes four bundlers in various configurations, all of them are configured as closely as possible (production build, no cache):

• Esbuild as bundler without any extra plugins
• Parcel in its default configuration with Babel and Terser
• Rollup and Webpack in three different presets: Babel and Terser, Esbuild and SWC

For the testing environment I used Mac OS 11.5.2 and Node 16.20.0, with the latest package versions at the time of writing this article.

Tests were done on a 6-core 2019 MacBook Pro with 16gb of RAM. To ensure the accuracy of my measurements each test was run three times consecutively, the final results represent the average value.

In addition, I have measured the size of the resulting bundle and its size after gzip compression with standard settings.

All code is available in the GitHub repository

Results

Time in sec (average time for 3 runs)

Bundle size in KiB

Bundle size after gzip in KiB

Conclusion

Esbuild as a bundler currently is significantly faster than others, it will be fascinating to see how it compares to swcpack in the future, but at the moment it's the ultimate winner.

When we consider Esbuild and SWC as plugins with other bundlers, there is really not much difference between them, it completely depends on the specific configuration, detailed comparison between them you can find here.

A couple of words about Parcel, when I tried to build 10 copies of three.js my results were completely identical to Esbuild benchmark, it really was the fastest, but for React application the metrics are different.

The unpleasant discovery for me was the build time of Rollup, on a large number of files/imports it shows worse results even than Webpack.

So, what to choose for React app:

• To achieve maximum performance and if you don't care about HMR support consider using Esbuild as bundler
• If you are already using Webpack, you can simply improve the build speed by using Esbuild or SWC as a loader and minimizer, in this case you can keep using CRA configuration
• If you really need HMR you can use combination of the previous options, Esbuild for production, Webpack + Esbuild loader for development (don’t use different tools for dev and production builds, there is a chance that the generated code may be different)