uniapp 微信小程序 vendor过大如何优化

1. 分包加载：将非核心代码拆分为独立分包，按需加载。
2. 压缩代码：使用webpack等工具压缩JS/CSS，删除无用代码。
3. 图片优化：压缩图片，转用WebP格式，减少资源体积。
4. 按需引入：避免全量引入第三方库，只导入必要模块。
5. 清理依赖：删除未使用的库，使用轻量替代方案。

UniApp 微信小程序 vendor 文件过大时，可通过以下方法优化：

1. 分包加载

• 将非核心页面或组件拆分为独立分包，减少主包体积。
• 在 pages.json 中配置：

  {
    "subPackages": [
      {
        "root": "subpackage",
        "pages": [
          {"path": "pageA", "style": {}},
          {"path": "pageB", "style": {}}
        ]
      }
    ]
  }
  

2. 按需引入组件/库

• 避免全量引入第三方库（如 lodash、moment），改用按需导入：

  import debounce from 'lodash/debounce'; // 而非 import _ from 'lodash'
  

• 优先使用 UniApp 内置 API，减少外部依赖。

3. 压缩代码与资源

• 开启生产环境压缩：
  • 在 vue.config.js 中配置：

    module.exports = {
      configureWebpack: {
        optimization: {
          minimize: true // 启用 Terser 压缩
        }
      }
    };
    

• 压缩图片（使用 TinyPNG 等工具），或转用 CDN 链接。

4. Tree Shaking

• 确保项目使用 ES6 模块语法，构建时自动移除未使用代码。
• 检查 package.json 中的 sideEffects 字段，标记无副作用的模块。

5. 分析依赖

• 使用 webpack-bundle-analyzer 分析 vendor 组成：

  npm run build:mp-weixin -- --report
  

  根据报告剔除冗余依赖。

6. 公共代码提取

• 利用 webpack 的 SplitChunksPlugin 拆分公共模块，避免重复打包。

7. 升级 UniApp 与依赖

• 确保使用最新版本，可能已优化体积问题。

8. 减少全局样式/组件

• 避免全局样式文件过大，按页面拆分 CSS。
• 组件按需注册，避免主包加载未使用的组件。

示例操作步骤：

1. 检查并分包：将非首屏页面移至分包。
2. 替换重型库：如用 dayjs 替代 moment。
3. 构建后分析：根据报告针对性优化。

通过以上方法，可显著减小 vendor 体积，提升小程序加载速度。