Webpack 打包优化完全指南

构建速度优化

1. 缩小构建范围

module.exports = {
  resolve: {
    // 只查找这些后缀
    extensions: [".js", ".jsx"],
    // 指定模块查找路径
    modules: ["node_modules"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
}

2. 使用缓存

// babel-loader 缓存
cacheDirectory: true

// thread-loader 多进程
{
  loader: "thread-loader",
  options: {
    workers: require("os").cpus().length - 1
  }
}

3. HappyPack / thread-loader

{
  test: /\.js$/,
  use: [
    "thread-loader",
    "babel-loader"
  ]
}

打包体积优化

1. 代码分割

// 入口分割
entry: {
  main: "./src/index.js",
  vendor: ["react", "react-dom"]
}

// 动态导入
const module = await import("./module.js")

// splitChunks
optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors",
        priority: 10
      }
    }
  }
}

2. Tree Shaking

// package.json
"sideEffects": false

// 或使用 ES6 模块
import { func } from "./module"  // ✅
const module = require("./module")  // ❌

3. 压缩代码

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

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      parallel: true,
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      }
    })
  ]
}

4. 图片优化

{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: "url-loader",
      options: {
        limit: 8192,  // 小于 8KB 转 base64
        name: "[name].[hash:8].[ext]"
      }
    },
    {
      loader: "image-webpack-loader",
      options: {
        mozjpeg: { progressive: true, quality: 65 },
        pngquant: { quality: [0.65, 0.90] }
      }
    }
  ]
}

开发体验优化

1. Source Map

// 开发环境
devtool: "eval-source-map"

// 生产环境
devtool: "source-map"

2. Hot Module Replacement

devServer: {
  hot: true,
  open: true,
  port: 3000
}

3. 构建分析

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

plugins: [
  new BundleAnalyzerPlugin({
    analyzerMode: "static",
    openAnalyzer: false
  })
]

缓存优化

output: {
  filename: "[name].[contenthash].js",
  chunkFilename: "[name].[contenthash].chunk.js",
  path: path.resolve(__dirname, "dist"),
  clean: true
}

外部化依赖

externals: {
  react: "React",
  "react-dom": "ReactDOM"
}

生产环境配置示例

module.exports = {
  mode: "production",
  devtool: "source-map",
  performance: {
    hints: "warning",
    maxAssetSize: 250000
  }
}

监控指标

• 构建时间
• 打包体积
• 首屏加载时间
• 资源加载时间

优化是一个持续过程，需要不断监测和调整！