Speed up your Webpack build with esbuild! 🔥
esbuild is written in Go, and supports blazing fast ESNext & TypeScript transpilation, and JS minification.
npm i -D esbuild-loader
In webpack.config.js
:
+ const { ESBuildPlugin } = require('esbuild-loader')
module.exports = {
module: {
rules: [
- {
- test: /\.js$/,
- use: 'babel-loader',
- },
+ {
+ test: /\.js$/,
+ loader: 'esbuild-loader',
+ options: {
+ target: 'es2015', // Syntax to compile to (see options below for possible values)
+ },
+ },
...
],
},
plugins: [
+ new ESBuildPlugin()
]
}
In webpack.config.js
:
+ const { ESBuildPlugin } = require('esbuild-loader')
module.exports = {
module: {
rules: [
- {
- test: /\.tsx?$/,
- use: 'ts-loader',
- },
+ {
+ test: /\.tsx?$/,
+ loader: 'esbuild-loader',
+ options: {
+ loader: 'tsx', // Or 'ts' if you don't need tsx
+ target: 'es2015',
+ },
+ },
...
],
},
plugins: [
+ new ESBuildPlugin()
]
}
You can replace JS minifiers like Terser or UglifyJs. Checkout the benchmarks to see how much faster esbuild is.
In webpack.config.js
:
+ const {
+ ESBuildPlugin,
+ ESBuildMinifyPlugin
+ } = require('esbuild-loader')
module.exports = {
...,
+ optimization: {
+ minimize: true,
+ minimizer: [
+ new ESBuildMinifyPlugin({
+ target: 'es2015' // Syntax to compile to (see options below for possible values)
+ })
+ ],
+ },
plugins: [
+ new ESBuildPlugin()
]
}
💁♀️ Protip: Use the minify plugin in-place of the loader to transpile your JS
The
target
option helps esbuild be smart about using new and concise syntax to perform better minification. If you're not using TypeScript or any syntax unsupported by Webpack, you can also leverage this as a transpilation step. It will be faster because there's less files to work on and will produce a smaller output because the polyfills will only be bundled once for the entire build instead of per file.
The loader supports options from esbuild.
target
<String>
(es2015
) - Environment target (e.g. es2016, chrome80, esnext)loader
<String>
(js
) - Which loader to use to handle file- Possible values:
js
,jsx
,ts
,tsx
,json
,text
,base64
,file
,dataurl
,binary
- Possible values:
jsxFactory
<String>
- What to use instead of React.createElementjsxFragment
<String>
- What to use instead of React.Fragment
Enable source-maps via devtool
target
<String>
(esnext
) - Environment target (e.g. es2016, chrome80, esnext)minify
<Boolean>
(true
) - Sets all--minify-*
flagsminifyWhitespace
<Boolean>
- Remove whitespaceminifyIdentifiers
<Boolean>
- Shorten identifiersminifySyntax
<Boolean>
- Use equivalent but shorter syntaxsourcemap
<Boolean>
(defaults to Webpackdevtool
)- Whether to emit sourcemaps
- MIT © privatenumber
- MIT © EGOIST (Kevin Titor)