uniapp 分包内没有vendor.js文件导致主包的vendor.js文件过大如何优化

1. 检查分包配置，确保正确设置optimization.splitChunks。
2. 使用webpack-bundle-analyzer分析包体积，找出大文件。
3. 将公共依赖提取到分包，或使用CDN引入部分库。
4. 开启压缩和Tree Shaking，移除未使用代码。

在 UniApp 中，分包没有独立的 vendor.js 文件，导致主包的 vendor.js 文件过大，可以通过以下方法优化：

1. 配置分包

在 pages.json 中明确配置分包，将非核心页面移入分包，减少主包体积：

{
  "subPackages": [
    {
      "root": "subpackageA",
      "pages": [
        {"path": "page1", "style": {}},
        {"path": "page2", "style": {}}
      ]
    }
  ]
}

2. 按需引入依赖

• 避免在主包中引入未使用的第三方库。
• 使用动态导入（如 import()）按需加载模块，例如在分包中引入特定依赖。

3. 优化代码分割

• 检查 node_modules 中的依赖，移除未使用的库。
• 使用 Webpack 的 splitChunks 配置（在 UniApp 中通过 vue.config.js 自定义）分割公共代码：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all'
          }
        }
      }
    }
  }
};

4. 压缩和混淆

• 确保生产构建时启用代码压缩（UglifyJs/Terser）和混淆，减少文件大小。

5. 使用 CDN 加载资源

• 将大型库（如 echarts、moment）通过 CDN 引入，减少主包体积。在 index.html 中添加 CDN 链接，并在 vue.config.js 中配置外部化：

module.exports = {
  configureWebpack: {
    externals: {
      'echarts': 'echarts'
    }
  }
};

6. 检查静态资源

• 将图片、字体等静态资源移至云存储或 CDN，避免打包到主包。

7. 分析包内容

使用工具（如 webpack-bundle-analyzer）分析包组成，识别大文件并针对性优化。

总结：

通过分包、按需引入、代码分割和资源外部化，可有效减少主包 vendor.js 体积。优化后测试构建结果，确保功能正常。