试用esbuild-loader

2021年10月9日 • ... • ☕️ 1 min read

esbuilder-loader 让同时使用webpack和esbuild成为可能，后者使用Go语言，可以显著提高编译速度。

替换babel-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            cacheCompression: true,
            compact: true
          }
        }
      },
      // ...
  }
  // ...
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'esbuild-loader',          options: {            loader: 'tsx',            target: 'es2015'          }        }
      },
      // ...
  }
  // ...
};

js和css代码优化

通常我们会使用一些优化插件来优化js和css。比如js有Terser或者UglifyJs，css的有css-minimizer-webpack-plugin或者optimize-css-assets-webpack-plugin。

如果配合esbuild-loader，需要使用内置的ESBuildMinifyPlugin插件。

对于js，直接干掉原本的Terser或者UglifyJs即可。目前还未支持不输出console/debugger（dropconsole和dropdebugger），不过问题不大。

对于css，插件配置使用css: true即可。

const { ESBuildMinifyPlugin } = require('esbuild-loader');module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          // 如果不抽离 css 可以使用此 loader
          // {
          //   loader: 'style-loader',
          // },
          {
            loader: 'css-loader'
          }
        ]
      }
      // ...
  },
  optimization: {
    minimizer: [
      new ESBuildMinifyPlugin({        target: 'es2015',        css: true, // Apply minification to CSS assets        minify: true,        legalComments: 'none'      }),    ]
  // ...
};

效果对比

之前（未配置cacheDirectory）

✨  Done in 30.51s.

之后

✨  Done in 15.41s.

效果明显。最后需要注意看看插件、样式是否正常。