How I decreased our React App build time by 96.26% 🚀 (Webpack + Esbuild) – Part 2

5 min readMar 25, 2023

Let’s continue our journey to improve front-end development without the hassle of more extended builds and longer deployment times! 🚀

In the earlier post ( yes, it’s a 2 part article!, if you haven’t read the first part, you are missing out on some critical information regarding Webpack and some back-story in my series), we reduced the Webpack bundler’s build time by staggering 85%, we had decreased from 19 minutes of building web.js build file, to ultimately ~3 mins!

P.S: DISCLAIMER: This article is subject to one’s due diligence and only to be taken as a piece of information in this vast sea of bundlers’ and transpilers’ knowledge. Any corrections or suggestions are gladly welcomed. Esbuild is not being endorsed, neither Babel is being criticized, it's my own opinion and is highly subjective to one’s opinion towards the latter.

Optimization: Part 2

Every engine requires an upgrade, requires maintenance!

If adding a line of code, as mentioned below can give us a build performance boost of 85%, then one should explore what else could be done to improve it even further. Never stop, coz the sky is the limit!

{
  ....
  exclude: /node_modules/,
  ....
}

I was hungry for more, so I began to study more of ourwebpack.config.js, I noticed that we are using Babel for all our trans-compiling processes, wouldn’t go into the details but, Babel trans-compiles JS & JSX code, in conjunction with Webpack.

Babel uses lots of plugins to perform these actions, they are as follows —

 "babel-plugin-styled-components",
 "@babel/plugin-proposal-class-properties",
 "@babel/plugin-syntax-dynamic-import"

According to Jack Burgess’s article on Babel vs EsBuild —

Recent versions of Babel opted for a plugin-heavy configuration option rather than including lots of often-unused features within the core package. This provides some barrier to entry for most — it’s difficult to find the right configuration for exactly what you need it for. There are many guides, however, that can assist someone in getting started!

Solution

The plan of action was straight —

Migrate the existing Babel trans-compiling methods to that of Esbuild.
Very Important — Do the necessary checks that NOTHING BREAKS! 💥

Step 1 -

Install esbuild-loader

npm i -D esbuild-loader

Now snatch that Babel’s babel-loaderout of the webpack.config.js and place the shiny new esbuild-loader in it —

Mind it this is only for the trans-compiling of JSX-related files.

 module.exports = {
    module: {
      rules: [
-       {
-         test: /\.js$/,
-         use: 'babel-loader'
-       },
-       {
-         test: /\.tsx?$/,
-         use: 'ts-loader'
-       },
+       {
+         // Match js, jsx, ts & tsx files
+         test: /\.[jt]sx?$/,
+         loader: 'esbuild-loader',
+         options: {
+           // JavaScript version to compile to
+           target: 'es2015'
+         }
+       },

        ...
      ],
    },
  }

Step 2 —

Replacing TerserPlugin with Esbuild minimizer

What is a minimizer?

Webpack provides several optimization techniques, to as literally mentioned minimize your final JS build using TerserPlugin by default. We would be replacing that with EsBuild plugin to minimize our build.

+ const { EsbuildPlugin } = require('esbuild-loader')

  module.exports = {
    ...,

+   optimization: {
+     minimizer: [
+       new EsbuildPlugin({
+         target: 'es2015'  // Syntax to compile
+       })
+     ]
+   },
  }

Step 3 —

Update existing minimizer with that of EsBuild configuration, your webpack.config.js , would be already using MiniCssExtractPlugin —

const { EsbuildPlugin } = require('esbuild-loader')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

  module.exports = {
    ...,

    optimization: {
      minimizer: [
        new EsbuildPlugin({
          target: 'es2015',
+         css: true  // Apply minification to CSS assets
        })
      ]
    },

    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        }
      ]
    },

    plugins: [
      new MiniCssExtractPlugin()
    ]
  }

In summary, following all these steps, we have

Replaced babel-loader with that of esbuild-loader.
Replaced TerserPlugin with EsBuild plugin for minification of Javascript Build a.k.a web.js .
Update the minimizer to also minimize CSS files using EsBuild.

If you have followed me till here, please do leave a comment or clap in solidarity to support independent authors like us so that it motivates to share the learnings to our wonderful community!