esbuild打包速度碾壓webpack,其優(yōu)勢我在另一篇文章中寫過循榆，請見為什么esbuild更快
下面介紹將webpack和esbuild結(jié)合的工具: esbuild-loader
install
$ npm i -D esbuild-loader
Quick Setup
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)
+ }
+ },
...
],
},
}
原理
1.esbulder-loader 調(diào)用 esbulid 去打包js 代碼忍燥。
2.esbuild是go寫的，可以打包成二進(jìn)制文件，不用再安裝go相關(guān)環(huán)境邮辽。
速度對比
Before:
After:
結(jié)論：速度快了1/3左右，esbuilder-loader只能取代babal-loader的左右扮宠，像png,css等資源無法提供支持滥沫。
