uniapp、vue3小程序分包后子包没有common/vendor.js 导致主包过大如何解决？

在使用uniapp和vue3开发小程序时，分包后发现子包没有生成common/vendor.js，导致主包体积过大。请问如何解决这个问题？是否需要在分包配置中手动指定公共依赖，或者有其他优化方案可以减小主包大小？

2 回复

可通过配置optimization.splitChunks手动提取公共依赖到子包，或使用webpack-bundle-analyzer分析包体积，将大库移入子包。也可开启tree shaking删除未使用代码。


在UniApp + Vue3 小程序分包场景下，如果子包缺少 common/vendor.js 导致主包过大，可以通过以下方式优化：

1. 配置分包策略

在 pages.json 中明确指定分包，并确保公共依赖被合理拆分：

{
  "subPackages": [
    {
      "root": "subpackageA",
      "pages": [...],
      "independent": false  // 确保非独立分包可共享主包资源
    }
  ],
  "preloadRule": {
    "subpackageA/index": {
      "network": "all",
      "packages": ["__APP__"]
    }
  }
}

2. 代码分割与依赖优化

  • 按需引入第三方库：避免全量引入，例如：
    // 错误示例：import _ from 'lodash'
// 正确示例：import debounce from 'lodash/debounce'
  • 配置 optimization.splitChunks：在 vue.config.js（或 vite.config.js）中强制拆分公共模块：
    module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            name: 'vendor',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          }
        }
      }
    }
  }
};

3. 检查编译配置

  • 确保 manifest.json 中未开启 “优化分包” 等实验性功能（可能影响 vendor 生成）。
  • 在 HBuilderX 中勾选 “运行到小程序时自动拆分 common 模块”（若适用）。

4. 手动分离高频依赖

将大型库（如 echarts、three.js）移至子包：

  • 在子包内单独引入，避免主包加载。
  • 使用 小程序分包异步化（需基础库支持）动态加载。

5. 资源优化

  • 压缩图片/静态资源，减少主包体积。
  • 清理未使用的代码（通过 webpack-bundle-analyzer 分析依赖）。

最终建议：

优先检查 分包配置 与 构建工具优化，确保公共模块被正确提取。若问题持续，可尝试临时合并部分子包内容至主包，平衡加载性能。

通过上述调整，可有效控制主包体积，提升加载速度。

回到顶部