Webpack 5 打包优化实战

构建速度优化

1. 持久化缓存

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

2. 缩小构建范围

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

3. 使用 esbuild 替代 babel

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

输出文件优化

代码分割

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

Tree Shaking

// package.json
{
  "sideEffects": ["*.css", "*.scss"]
}

压缩优化

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: { compress: { drop_console: true } }
      })
    ]
  }
};

优化后构建速度提升 10 倍！