Skip to main content

Front-End Development

Webpack Builds Too Slow? Try ESBuild-loader Plugin.

A team of tech workers in a meeting together.

“My project is not ready to move away from webpack and deal with migration issues just yet.”

“I want to speed up my project builds without having to completely uproot webpack.”

If either of the statements above applies to you, please consider the ESBuild-loader plugin for webpack. This nifty little plugin essentially utilizes the amazing transpilation speeds that ESBuild offers. ESBuild-loader is a direct replacement of (babel-loader/ts-loader) in your webpack build pipeline.

What is the ESBuild-loader?

ESBuild is a JavaScript bundler that is written in GO language and offers blazing-fast ESNext and typescript translation.

  • Go performs better than JavaScript because of its concurrency model and CPU scalability.
  • ESBuild is written with performance in mind from scratch.
  • ESBuild uses memory efficiently with parallelism at its core, unlike JavaScript, which has to serialize data between threads.

Webpack Build Times with Babel-Loader

Shown below is the production build time of a large-size project that utilizes babel-loader for transpiling JavaScript. Clearly, this project could use a bit of a boost.

Webpack build times with babel-loader

Quick Setup: ESBuild-loader

Lets quickly install ESBuild-loader and configure webpack to use it.
npm i -D esbuild-loader

In your webpack config file replace babel-loader with ESBuild-loader shown below. Source-maps  are automatically configured.

Note: eslint-loader is deprecated, please replace with eslint-webpack-plugin if you haven’t already.

Esbuild Loader


Now let’s run the same build script with esbuild-loader

Esbuild Loader Webpack

That’s a 40% decrease on a production build time which is a number that is sure gain attention while doing performance improvements.

While results may vary per project it is clear that the esbuild-loader significantly improves build times and when combined with ESBuildMinifyPlugin  for JS and CSS minification webpack builds can be optimal.

Here are some resources

Happy hacking!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Vikram Gopal

I am a senior technical consultant with 5 years of Front End experience on the EPiServer/Optimizely platform. I am always on the lookout for ways to enhance UI and UX development workflows with the latest tools and technologies.

More from this Author

Follow Us