esbuild-loader
Speed up your Webpack build with esbuild!
esbuild is a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation and JS minification.
esbuild-loader lets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!
Curious how much faster your build will be? See what users are saying.
If you like this project, please star it & follow me to see what other cool projects I'm working on!
🚀 Install
npm i -D esbuild-loader
🚦 Quick Setup
Javascript & JSX transpilation (eg. Babel)
In webpack.config.js
:
module.exports = {
module: {
rules: [
- {
- test: /\.js$/,
- use: 'babel-loader',
- },
+ {
+ test: /\.js$/,
+ loader: 'esbuild-loader',
+ options: {
+ loader: 'jsx', // Remove this if you're not using JSX
+ target: 'es2015' // Syntax to compile to (see options below for possible values)
+ }
+ },
...
],
},
}
TypeScript & TSX
In webpack.config.js
:
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'
+ }
+ },
...
]
},
}
Configuration
If you have a tsconfig.json
file, esbuild-loader will automatically detect it.
Alternatively, you can also pass it in directly via the tsconfigRaw
option:
{
test: /\.tsx?$/,
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015',
+ tsconfigRaw: require('./tsconfig.json')
}
}
tsconfig
options (see TransformOptions
interface) and does not do type-checks. It's recommended to use a type-aware IDE or tsc --noEmit
for type-checking instead. It is also recommended to enable isolatedModules
and esModuleInterop
options in your tsconfig
by the esbuild docs.
Minification (eg. Terser)
You can replace JS minifiers like Terser or UglifyJs. Checkout the benchmarks to see how much faster esbuild is. The target
option tells esbuild that it can use newer JS syntax to perform better minification.
In webpack.config.js
:
+ const { ESBuildMinifyPlugin } = require('esbuild-loader')
module.exports = {
...,
+ optimization: {
+ minimizer: [
+ new ESBuildMinifyPlugin({
+ target: 'es2015' // Syntax to compile to (see options below for possible values)
+ })
+ ]
+ },
}
💁♀️ Protip: Use the minify plugin in-place of the loader to transpile your JS
If you're not using TypeScript, JSX, or any syntax unsupported by Webpack, you can also leverage the minifier for transpilation (as an alternative to Babel). 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. Simply set the target
option on the minifier to specify which support level you want.
Examples
If you'd like to see working Webpack builds that use esbuild-loader for basic JS, React, TypeScript, or Next.js, check out the examples repo.
⚙️ Options
Loader
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.createElement -
jsxFragment
String
- What to use instead of React.Fragment
Enable source-maps via devtool
MinifyPlugin
-
target
String|Aray<String>
('esnext'
) - Environment target (e.g.'es2016'
,['chrome80', 'esnext']
) -
minify
Boolean
(true
) - Sets allminify
flags -
minifyWhitespace
Boolean
- Remove whitespace -
minifyIdentifiers
Boolean
- Shorten identifiers -
minifySyntax
Boolean
- Use equivalent but shorter syntax -
sourcemap
Boolean
(defaults to Webpackdevtool
) - Whether to emit sourcemaps -
include
String|RegExp|Array<String|RegExp>
- Filter assets for inclusion in minification -
exclude
String|RegExp|Array<String|RegExp>
- Filter assets for exclusion in minification
💼 License
- MIT © privatenumber
- MIT © EGOIST (Kevin Titor)