Webpack代码分割：Vendor和DLL，哪个更适合我的项目？

在Webpack构建优化中，Vendor分割和DLL插件都是常见的代码分割策略，但适用场景不同。以下是详细对比和选择建议：

1. Vendor Split（基础方案）

原理：通过splitChunks将node_modules代码拆分为单独的vendor chunk。

// webpack.config.js
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

优点： - 零配置：Webpack 4+原生支持，配置简单 - 动态更新：node_modules变化时自动重新生成vendor文件 - 长期缓存：配合contenthash可有效利用浏览器缓存

缺点： - 重复构建：每次构建都需重新处理node_modules - 开发模式性能一般：热更新时仍需加载较大的vendor文件

2. DLL Plugin（激进优化）

原理：预编译第三方库为独立文件，通过manifest.json映射依赖。

// webpack.dll.config.js
module.exports = {
  entry: {
    vendor: ['react', 'lodash', 'moment'] // 指定要预编译的库
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll', '[name]-manifest.json')
    })
  ]
};

优点： - 极速构建：开发环境构建跳过node_modules，提升50%+速度 - 分离彻底：第三方库完全独立，业务代码变更不影响DLL文件

缺点： - 维护成本高：需手动管理依赖更新（如升级React版本需重新生成DLL） - 配置复杂：需额外脚本和配置 - 生产环境收益有限：现代Webpack的Vendor Split已足够高效

选择建议

选 Vendor Split 如果：

✅ 项目使用Webpack 4+
✅ 追求配置简单、维护方便
✅ 生产环境构建速度可接受
✅ 第三方依赖更新频繁

选 DLL Plugin 如果：

✅ 超大型项目（1000+模块）
✅ 开发环境构建速度是首要痛点
✅ 第三方依赖长期稳定不变
✅ 能接受额外配置复杂度

现代替代方案

1. HardSourceWebpackPlugin：为开发环境提供中间缓存，效果类似DLL但零配置
2. Module Federation（Webpack 5）：微前端场景下更先进的共享模块方案

终极决策树

是否开发构建速度严重影响效率？
├─ 是 → 第三方依赖是否稳定？
│   ├─ 是 → 使用DLL
│   └─ 否 → Vendor Split + HardSourcePlugin
└─ 否 → Vendor Split + contenthash

根据项目阶段灵活选择：新项目建议从Vendor Split开始，遇到性能瓶颈时再考虑DLL方案。