Plugin-webpack内置功能split-chunks-plugin配置打包代码分割

1.前言

split-chunks-plugin自动拆分公共代码三方依赖与异步模块从而：减少主包体积，提升页面加载速度，避免重复打包相同依赖。**Webpack 4+**内置的功能，无需额外安装或引入任何依赖。在vueCLI3+默认策略Vue CLI 2 需要手动添加。

没有代码分割时：所有node_modules打包进一个vendor.js，多个页面共用组件被重复打包，用户首次加载慢。

使用split-chunks-plugin：第三方库（如 Vue、Element UI） → chunk-vendors.js，多页面公共代码 → chunk-common.js，异步路由组件 → 按需加载的独立 chunk，利用浏览器缓存：业务代码更新不影响 vendor 缓存。

2.split-chunks-plugin配置

在 build/webpack.prod.conf.js 的 optimization 中配置，Vue 2 + Webpack 4 项目

javascript 复制代码

module.exports = {
splitChunks: {
  // ┌──────────────────────────────────────┐
  // │ 基础策略                             │
  // └──────────────────────────────────────┘

  // 对哪些 chunk 进行拆分：
  // - 'initial'：仅入口同步模块
  // - 'async'：仅异步模块（如 import()）
  // - 'all'：两者都处理（推荐）
  chunks: 'all',

  // 模块体积 ≥20KB 才考虑拆分（单位：字节）
  // 太小的模块拆分会增加 HTTP 请求，得不偿失
  minSize: 20000,

  // 单个 chunk 最大不超过 244KB（可选）
  // 防止单个 vendor 包过大，利于 HTTP/1.1 并行加载或缓存
  maxSize: 244000,

  // 模块至少被引用 1 次就可被拆分
  // ⚠️ 关键！第三方库（如 vue、element-ui）通常只在 main.js 引入一次，
  //     若设为 2 会导致它们无法进入 vendor，仍留在主包中
  minChunks: 1,

  // 异步加载时，最大并行请求数（默认 30）
  // 控制按需加载的 chunk 数量，避免浏览器请求爆炸
  maxAsyncRequests: 30,

  // 首屏（初始加载）时，最大并行请求数
  // 包含：app.js + runtime.js + chunk-vendors.js + chunk-common.js 等
  // 设为 5 可安全容纳常见拆分结构（若设为 3 可能导致回退不拆分！）
  maxInitialRequests: 5,

  // 自动生成 chunk 名称时的分隔符
  // 例如：chunk-vendors～chunk-common.js
  automaticNameDelimiter: '～',

  // 是否自动生成有意义的 chunk 名称
  // true 表示根据模块路径和 cacheGroup 自动生成（推荐）
  name: true,


  // ┌──────────────────────────────────────┐
  // │ 缓存组（Cache Groups）               │
  // │ 优先级高的组先匹配，匹配后不再进入其他组 │
  // └──────────────────────────────────────┘

  cacheGroups: {
    // 【高优先级】拆分 node_modules（第三方依赖）
    vendor: {
      // 拆分后的 chunk 文件名
      name: 'chunk-vendors',

      // 匹配规则：所有来自 node_modules 的模块
      test: /[\\/]node_modules[\\/]/,

      // 优先级：数字越大越优先匹配
      // 必须高于 common（否则部分 node_modules 可能误入 common）
      priority: 10,

      // 仅对初始加载的模块生效（即非异步 import 的模块）
      // 避免把按需加载的第三方库（如路由内引入的 echarts）也打入 vendor
      chunks: 'initial',

      // 如果已有完全相同的模块 chunk，直接复用，不重复打包
      reuseExistingChunk: true,

      // 强制拆分：即使不满足 minSize/minChunks 也拆出
      // 确保 vendor chunk 一定生成（尤其当项目较小或依赖少时）
      enforce: true
    },

    // 【中优先级】拆分项目内部公共代码
    common: {
      // 拆分后的 chunk 文件名
      name: 'chunk-common',

      // 至少被 2 个 chunk 引用才拆分（适用于业务公共组件/工具函数）
      minChunks: 2,

      // 优先级低于 vendor
      priority: 5,

      // 同样只处理初始加载模块（可根据需要改为 'all'）
      chunks: 'initial',

      // 复用已有 chunk
      reuseExistingChunk: true,

      // 强制拆分，确保公共代码独立
      enforce: true
    }

    // ⚠️ 不要添加 minChunks: Infinity 的组（如 commons），
    //    它永远不会命中，纯属冗余。
  }
},

// ┌──────────────────────────────────────┐
// │ 单独提取 Webpack 运行时代码           │
// │ 作用：使业务代码更新时不影响 runtime 缓存 │
// └──────────────────────────────────────┘
runtimeChunk: {
  name: 'runtime'
}
}