Webpack Builds Too Slow? Try ESBuild-loader Plugin.

“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.

Quick Setup: ESBuild-loader

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

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

• esbuild-loader repository: https://github.com/privatenumber/esbuild-loader (make sure to star it!)
• why is esbuild fast? https://esbuild.github.io/faq/

Happy hacking!