Cut down your Webpack build times by half with esbuild-loader
Tags: webpack, react, javascript
Published: 2021-07-14 14:35:36

It's been a common practice in the web dev world to transpile Javascript code with tools built with... well Javascript. Webpack is a code bundler that takes in all your code along with dependencies from node_modules and spits out chunks of code depending on your configuration.

The problem with Javascript is that it's slow and that is visible in tools like Webpack and Rollup. But there are new kids on the block, namely esbuild, Vite and Snowpack. Snowpack and Vite internally use esbuild. esbuild is written in Golang which offers significant performance boosts.

There is one problem though: these tools are new and might not have all the plugins you need for your next project. Or, you just don't want to leave the Webpack world yet.

As your project grows larger, your build times get longer. There is a need to reduce build times.

When I say reduce build times, I also mean the time it takes to start your local dev server and the time taken for Hot Module Replacement. `esbuild-loader` offers significant improvements in all these areas

## In comes esbuild-loader

What if you could harness the power of esbuild within webpack? Let's get started with a code example.

> I will be using a [React boilerplate](https://github.com/ReactJSResources/react-webpack-babel) that uses Webpack and Babel. Feel free to use this on any project of your choice

Clone the repo on your machine with
  

```shell
git clone https://github.com/ReactJSResources/react-webpack-babel.git
cd react-webpack-babel
```

Install dependencies with NPM
  
  ```shell
  npm install
  ```
  
Now let's run `npm run build` before adding `esbuild-loader` to compare build times
  
  > webpack 5.4.0 compiled successfully in 6127 ms
 
![before esbuild-loader](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy8880hc3bx4v6abu37w.png)
  
Add `esbuild-loader`
  
  ```shell
  npm i -D esbuild-loader
  ```
  
Change your `webpack.config.json` file to replace `babel-loader` with `esbuild-loader`.
  
  > You can find this file in the root of your project. For the boilerplate, it's in the config folder. If you are using `create-react-app` you will have to eject.
  
  ```diff
    module.exports = {
      module: {
        rules: [
  -       {
  -         test: /\.js$/,
  -         use: 'babel-loader',
  -       },
  +       {
  +         test: /\.js$/,
  +         loader: 'esbuild-loader',
  +         options: {
  +           loader: 'jsx',
  +           target: 'es2015'
  +         }
  +       },
          ...
        ],
      },
    }
  ```
  
  Webpack uses Terser to minify JS and CSS. You can replace that with the `ESBuildMinifyPlugin` for a much faster minification process.
  
  ```diff
  + const { ESBuildMinifyPlugin } = require('esbuild-loader')
    module.exports = {
      ...,
  +   optimization: {
  +     minimizer: [
  +       new ESBuildMinifyPlugin({
  +         target: 'es2015',
  +         css: true 
  +       })
  +     ]
  +   },
    }
  ```
  
Now run `npm run build` to test it again
  
  > webpack 5.4.0 compiled successfully in 1904 ms
  
![After esbuild-loader](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8f0iy9sq8u8ahd2oj1jb.png)
  

## That's a pretty significant boost!

For an empty project, we reduced the build times to a third of the original build time. For larger and more realistic projects, you can expect build times closer to half of that with `babel-loader`.

**The time taken to start the dev server was less than a second!**

We can expect bundlers like Vite and Snowpack to grow in popularity with time. Till they become mainstream, `esbuild-loader` offers a great way to speed up builds.

Don't forget to star [privatenumber/esbuild-loader](https://github.com/privatenumber/esbuild-loader) on Github