Esbuild is a JavaScript bundler and minifier designed to be fast and efficient. It was created by Evan Wallace, co-founder of Figma.

What is esbuild-loader?

Esbuild-loader is a webpack plugin that uses the esbuild library to improve the performance of your builds. It can process JavaScript and TypeScript code quickly and accurately, making it an ideal tool for improving the performance of webpack builds.

What makes esbuild special?

One of the key features of esbuild is its speed. It is written in Go, a compiled language known for its performance. In addition, it uses parallelism and other optimization techniques to process JavaScript and TypeScript code quickly and accurately. This makes esbuild well-suited for use in large and complex webpack projects, where build performance is critical.

In addition to its speed, esbuild provides several other useful features, such as support for JSX, automatic code splitting, and tree shaking. This makes it a versatile tool for improving the performance of webpack builds, and it is the underlying technology that powers the esbuild-loader.

In this article, we will look at how esbuild-loader works and how it can help improve the performance of your webpack builds. We will also show you how to set up esbuild-loader in your webpack project and demonstrate some of its key features.

How does esbuild-loader work?

Esbuild-loader uses the esbuild library to process your project's JavaScript and TypeScript code during the webpack build process. This can significantly speed up your build time, especially for large and complex projects.

Esbuild-loader also provides additional features such as support for JSX and automatic code splitting. This makes working with modern JavaScript frameworks and libraries, such as React and Vue.js, easier.

Setting up esbuild-loader

To use esbuild-loader in your webpack project, you must install the esbuild and esbuild-loader npm packages. You can do this using the following command:

npm install esbuild-loader

Once the packages are installed, you can add esbuild-loader to your webpack configuration. In your webpack.config.js file, replace the babel-loader or ts-loader with the new esbuild-loader.

This code tells webpack to use esbuild-loader for any JavaScript or TypeScript files in your project. 

The next step would be replacing the Terser plugin for mangling and minifying the JavaScript with the esbuild-loader. This can also return the OptimizeCssAssetsWebpackPlugin used for the minification of the CSS files, with the following configuration:

Setting up with Create React App

In the Create React App (CRA) case, it is impossible to modify the webpack configuration directly. However, utilities such as CRACO allow the overrides. Additionally, a simple package called craco-esbuild automates the patching and releases the burden of needing to understand the configuration process.

The first step is to install the necessary packages using the following command: 

npm install @craco/craco craco-esbuild

Then the next step is to create craco.config.js, which includes the newly installed craco-esbuild plugin. This plugin allows the configuration options in the same shape, as they are passed directly to the webpack plugins in the previous use case.

The last step is then to add new scripts to run the jobs, using CRACO instead of react-scripts in the package.json.

Using esbuild-loader

Once you have set up an esbuild-loader in your project, you can start using it to improve the performance of your builds. To do this, run your build as normal, and esbuild-loader will automatically process your project's JavaScript and TypeScript code using esbuild.

Here are some examples of how esbuild-loader can help improve your webpack build times:

• Code minification: Esbuild-loader can automatically minify your project's JavaScript and TypeScript code, reducing the size of your bundle and speeding up the build process.
• Tree shaking: Esbuild-loader can remove unused code from your project, reducing your bundle size and improving build times.
• Code splitting: Esbuild-loader can automatically split your project's code into multiple bundles, reducing the overall size of your project and speeding up the build process.
• JSX support: Esbuild-loader provides built-in support for JSX, making it easier to work with React

Performance gains

Esbuild author Evan Wallace claims that esbuild can reduce build times 10 - 100 times, compared to standard webpack builds. 

However, we want to keep our existing webpack build in place and delegate only  the subset of the build tasks to the esbuild. So we should expect more realistic gains. 

To benchmark the builds we used two mid-size projects, one using CRA and a second running a pure webpack configuration. Both showed a 50% reduction in build time, which makes this change a must-have for medium to large code bases. Don’t hesitate to include esbuild-loader in your projects!