webpack打包优化都有哪些

好问题 👍 webpack 打包优化可以从 构建速度 和 打包体积 两个方向入手。下面我帮你系统梳理一下：

🟦 一、构建速度优化（提升打包效率）

1. 缩小构建范围

• 合理使用 include / exclude

  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, 'src'),
    exclude: /node_modules/
  }
  

• 减少 resolve 范围

  resolve: {
    extensions: ['.js', '.json'], // 不要写太多
    alias: { '@': path.resolve('src') }
  }
  

2. 缓存

• 持久化缓存 (webpack5 内置)

  cache: {
    type: 'filesystem',
  }
  

• loader 层缓存
  使用 babel-loader 的 cacheDirectory: true

3. 多进程 / 并行

• thread-loader：把耗时的 loader 交给 worker 线程。

• parallel-webpack / HappyPack（webpack5 推荐 thread-loader）。

4. 预编译依赖（DLL）

• webpack4 时代常用 DllPlugin，现在更推荐 esbuild/swc 做依赖预编译。

5. 开发环境优化

• 开发模式用 cheap-module-source-map，不要启用压缩。

• 开启 HotModuleReplacementPlugin（HMR）。

🟦 二、打包体积优化（减少产物大小）

1. Tree Shaking

• 开启 mode: 'production'，配合 ES Module（import/export）。

• 确保 package.json 里的 "sideEffects": false 或者精确配置。

2. 代码分割（SplitChunks）

• optimization.splitChunks 提取公共依赖，避免重复打包。

• 常见配置：

  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      maxSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
  

3. 动态导入（懒加载）

• 用 import() 语法做路由级别、组件级别的代码拆分。

4. 压缩优化

• webpack5 内置 TerserWebpackPlugin 做 JS 压缩，支持多进程。

• css-minimizer-webpack-plugin 压缩 CSS。

• 开启 image-minimizer-webpack-plugin 压缩图片。

5. 资源优化

• 图片用 webp / avif。

• 字体、SVG 使用 iconfont / svgo。

6. 外部依赖（externals）

• 常见库（如 React、Vue、lodash）可以通过 CDN 引入，避免打到 bundle 里。

7. 分包（多入口 / Micro Frontend）

• 大型项目可以拆成多个入口，甚至用 qiankun / module federation。

🟦 三、生产环境优化

1. 开启压缩和去重

   • TerserPlugin 移除无用代码、console.log。

   • CssMinimizerPlugin 压缩 CSS。

2. 使用 CDN 加速静态资源

   • output.publicPath = 'https://cdn.xxx.com/'

3. 懒加载 + 预加载

   • /* webpackPrefetch: true */

   • /* webpackPreload: true */

4. 分析工具

   • webpack-bundle-analyzer 看看哪些包太大，有没有拆分空间。

🟦 四、替代方案（更快的工具链）

• 在 webpack 中嵌入 esbuild-loader / swc-loader，JS/TS 转译能快几十倍。

• 新项目可考虑 Vite、Rspack、Turbopack。

✅ 总结：

• 构建速度优化：缓存、多进程、减少搜索范围、开发环境精简。

• 打包体积优化：Tree Shaking、代码分割、懒加载、压缩、externals、分析工具。

• 生产环境优化：CDN、预加载、分析 bundle。