Webpack 的分包（Code Splitting）是优化应用性能的重要手段，主要通过合理拆分代码减少首次加载体积、提升缓存利用率。以下是常见的分包方式及生产/开发环境配置建议：

一、Webpack 分包方式

1.入口分包（Entry Points）

• 原理：通过多入口配置拆分代码，每个入口生成独立的 bundle。
• 示例：

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js',
  },
  output: {
    filename: '[name].bundle.js',
  },
};

• 缺点：手动维护困难，公共代码重复打包。

2.动态导入（Dynamic Imports）

• 原理：通过 import() 语法或 require.ensure 实现按需加载。
• 示例：

// 使用 import()
button.addEventListener('click', async () => {
  const module = await import('./someModule.js');
  module.doSomething();
});

• 输出：Webpack 自动将动态导入的模块拆分为独立 chunk。

3.SplitChunksPlugin（公共代码提取）

• 原理：提取公共模块（如第三方库、公共组件）到独立 chunk。
• 配置示例：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
        common: {
          minChunks: 2,
          name: 'common',
          priority: 5,
        },
      },
    },
  },
};

• 关键参数：
• chunks: 'all'：处理所有类型 chunk（同步/异步）。
• minSize：模块最小体积阈值。
• cacheGroups：自定义分组策略。

4.Runtime 代码分离

• 原理：将 Webpack 运行时代码（模块映射表）单独拆分，避免影响业务代码缓存。
• 配置：

optimization: {
  runtimeChunk: 'single',
},

5.DLLPlugin（预编译库）

• 原理：将不常变动的第三方库（如 React、Lodash）预先编译为 DLL，减少构建时间。
• 步骤：
• 创建 webpack.dll.config.js 生成 DLL 文件。
• 主配置中通过 DllReferencePlugin 引用 DLL。

二、生产环境 vs 开发环境配置

1. 生产环境

• 核心目标：代码压缩、缓存优化、体积最小化。
• 推荐配置：

module.exports = {
  mode: 'production',
  output: {
    filename: '[name].[contenthash].js', // 使用 contenthash 长效缓存
    chunkFilename: '[name].[contenthash].chunk.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000, // 20KB 以上才拆分
      maxAsyncRequests: 5, // 控制异步 chunk 数量
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
    runtimeChunk: 'single', // 分离运行时代码
    minimizer: [
      new TerserPlugin(), // 压缩 JS
      new CssMinimizerPlugin(), // 压缩 CSS
    ],
  },
};

2. 开发环境

• 核心目标：快速构建、调试友好。
• 推荐配置：

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map', // 快速 SourceMap
  optimization: {
    splitChunks: {
      chunks: 'all', // 可简化配置或不拆分
    },
    runtimeChunk: true, // 可选
  },
  cache: true, // 启用缓存加速构建
};

三、最佳实践

1. 生产环境：
2. 使用 contenthash 实现长效缓存。
3. 优先提取 node_modules 到 vendors。
4. 按业务逻辑动态导入非关键代码（如路由组件）。
5. 避免过细拆分（HTTP/2 下可适当放宽）。
6. 开发环境：
7. 关闭代码压缩以提升构建速度。
8. 使用轻量级 SourceMap（如 eval-cheap-module-source-map）。
9. 可禁用复杂分包策略（如 splitChunks.minSize: 0 快速调试）。