Webpack 5 配置优化：打包速度提升 3 倍

前端项目越来越大，构建速度成为痛点。本文分享 Webpack 优化技巧。

开启持久缓存

// webpack.config.js
module.exports = {
  cache: {
    type: "filesystem",
    buildDependencies: {
      config: [__filename]
    }
  }
};

代码分割

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors"
        }
      }
    }
  }
};

Tree Shaking

// package.json
{
  "sideEffects": false
}

使用 ESBuild/SWC 加速

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: "esbuild-loader",
        options: { loader: "js", target: "es2020" }
      }
    }]
  }
};

缩小加载范围

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve(__dirname, "src"),
      exclude: /node_modules/
    }]
  }
};

分析打包结果

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

plugins: [
  new BundleAnalyzerPlugin()
]

优化后，构建时间从 60 秒降至 20 秒！