webpack打包优化都有哪些

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

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

1. 缩小构建范围

合理使用 include / exclude

javascript 复制代码

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

减少 resolve 范围

csharp 复制代码

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

2. 缓存

持久化缓存 (webpack5 内置)
css 复制代码
```
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 提取公共依赖，避免重复打包。

常见配置：

yaml 复制代码

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。

🟦 三、生产环境优化

开启压缩和去重
- TerserPlugin 移除无用代码、console.log。
- CssMinimizerPlugin 压缩 CSS。
使用 CDN 加速静态资源
- output.publicPath = 'https://cdn.xxx.com/'
懒加载 + 预加载
- /* webpackPrefetch: true */
- /* webpackPreload: true */
分析工具
- webpack-bundle-analyzer 看看哪些包太大，有没有拆分空间。

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

在 webpack 中嵌入 esbuild-loader / swc-loader，JS/TS 转译能快几十倍。
新项目可考虑 Vite、Rspack、Turbopack。

✅ 总结：

构建速度优化：缓存、多进程、减少搜索范围、开发环境精简。
打包体积优化：Tree Shaking、代码分割、懒加载、压缩、externals、分析工具。
生产环境优化：CDN、预加载、分析 bundle。