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等資源無法提供支持。