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 that uses Webpack and Babel. Feel free to use this on any project of your choice
Clone the repo on your machine with
git clone https://github.com/ReactJSResources/react-webpack-babel.git
cd react-webpack-babel
Install dependencies with NPM
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
Add esbuild-loader
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.
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.
+ 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
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 on Github
Top comments (0)