uniapp 打包H5 分包的问题 vue2版本

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

对于 uni-app Vue2 项目打包 H5 时拆分 vendor.js 中的第三方依赖，可以通过配置 vue.config.js 来实现。

根据对话知识库中的官方回复，Vue2 项目会对 node_modules 进行主动拆分，这为我们提供了基础支持。你可以通过自定义 webpack 的 splitChunks 配置来进一步细化拆分策略。

具体实现方法如下：

在项目根目录创建或修改 vue.config.js 文件：

// vue.config.js  
module.exports = {  
  configureWebpack: {  
    optimization: {  
      splitChunks: {  
        cacheGroups: {  
          // 拆分 Vue 核心库  
          vue: {  
            test: /[\\/]node_modules[\\/]vue[\\/]/,  
            name: 'chunk-vue',  
            chunks: 'all',  
            priority: 20,  
            enforce: true  
          },  
          // 拆分其他大型第三方依赖（例如 vconsole、socket.io 等）  
          // 可根据实际情况添加更多规则  
          libs: {  
            test: /[\\/]node_modules[\\/](vconsole|socket\.io-client)[\\/]/,  
            name: 'chunk-libs',  
            chunks: 'all',  
            priority: 15,  
            enforce: true  
          },  
          // 默认的 vendors 分组（处理剩余的 node_modules 依赖）  
          vendors: {  
            test: /[\\/]node_modules[\\/]/,  
            name: 'chunk-vendors',  
            chunks: 'all',  
            priority: 10  
          }  
        }  
      }  
    }  
  }  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

配置说明：

• test：正则匹配需要拆分的模块路径，node_modules 中的具体包名
• name：拆分后的 chunk 文件名
• chunks: 'all'：对所有类型的 chunk 生效（包括异步和同步加载的模块）
• priority：优先级，数值越大优先级越高。当一个模块同时匹配多个规则时，会分配到优先级最高的分组
• enforce: true：强制创建该 chunk，忽略 splitChunks 的其他限制条件（如最小体积）

注意事项：

1. H5 端支持：此配置基于 webpack，uni-app 的 H5 端完全支持 vue.config.js 的 webpack 配置修改，具体参考 vue-config.js 文档

2. Vue2 主动拆分：如对话知识库中官方所说，Vue2 项目本身就具备对 node_modules 的拆分能力，上述配置可以在此基础上进一步细化

3. 分包配置区别：如果你还需要配置页面级别的分包（主包/分包），那是在 pages.json 中通过 subPackages 配置的，与这里的 webpack chunk 拆分是两个不同层面的优化

4. 调试建议：配置后建议使用 webpack-bundle-analyzer 等工具分析打包结果，观察拆分效果是否符合预期

通过这样的配置，可以将 Vue、vconsole 等大型第三方库从 vendor.js 中独立出来，生成单独的 js 文件，有效减小主包体积，提升首屏加载速度。