webpack + esbuild-loader 提升构建速度

小半 • 2023年2月14日下午2:22 • 微信精选 • 阅读 327

esbuild 是基于 Golang 开发的一款打包工具，其主要目的是为了提升构建速度，相比传统打包工具速度可快 10 ~ 100 倍。

esbuild-loader 是一个构建在 esbuild 上的 webpack loader，且可以替代 babel-loader 或 ts-loader 来提高构建速度。

安装

pnpm i -D esbuild-loader

配置

替换 `ts-loader` 和 `babel-loader`

babel-loader 配置：

{
  test: /.tsx?$/,
  use: [{loader: 'babel-loader'}, {loader: 'ts-loader'}],
  exclude: [/node_modules/],
},
{
  test: /.jsx?$/,
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
  },
  exclude: [/node_modules/],
},

esbuild-loader 配置：

{
  test: /.jsx?$/,
  loader: 'esbuild-loader',
  options: {
    loader: 'jsx',
    target: 'es2018',
    jsx: 'automatic',
    tsconfigRaw: {},
    // implementation: esbuild, // 自定义 esbuild 版本
  },
  exclude: [/node_modules/],
},

替换 `TerserPlugin` 和 `CssMinimizerPlugin`

TerserPlugin 和 CssMinimizerPlugin 配置：

new TerserPlugin({
  parallel: true,
  extractComments: false,
  terserOptions: {
    ecma: 5,
    compress: {
      drop_console: true,
    },
    format: {
      comments: false,
    },
    parse: {},
    mangle: true,
    module: false,
  },
}),
new CssMinimizerPlugin({
  parallel: true,
  minimizerOptions: {
    preset: [
      'default',
      {
        discardComments: {removeAll: true},
      },
    ],
  },
}),

esbuild-loader 配置：

new ESBuildMinifyPlugin({
  target: 'es2018',
  css: true, // 缩小CSS
  minify: true, // 缩小JS
  minifyWhitespace: true, // 去掉空格
  minifyIdentifiers: true, // 缩短标识符
  minifySyntax: true, // 缩短语法
  legalComments: 'none', // 去掉注释
  // implementation: esbuild, // 自定义 esbuild 版本
}),