“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 written with performance in mind from scratch.
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.
Now let’s run the same build script with 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/