uniapp vendor.js过大如何优化？

在使用uniapp开发时，发现打包后的vendor.js文件体积过大，导致首屏加载缓慢。尝试过配置分包和开启压缩，但效果不明显。请问有哪些有效的优化方案可以减小vendor.js的体积？比如代码分割、按需引入组件或第三方库的优化建议？

2 回复
  1. 分包加载，将非首屏代码拆分到子包。
  2. 压缩混淆代码，开启Tree Shaking删除无用代码。
  3. 使用webpack-bundle-analyzer分析依赖，移除冗余库。
  4. 懒加载组件，减少初始包体积。
  5. 升级HBuilderX到最新版，优化打包机制。

在UniApp中，vendor.js 文件过大通常是由于第三方依赖过多或代码未合理拆分导致的。以下是几种优化方法，按推荐顺序排列：

1. 使用分包加载

将部分页面和依赖拆分为独立分包，减少主包体积。

  • 在 pages.json 中配置：
{
  "subPackages": [
    {
      "root": "subpackage",
      "pages": [
        {
          "path": "pageA",
          "style": { ... }
        }
      ]
    }
  ]
}

2. 按需引入第三方库

避免全量引入，例如使用 babel-plugin-import 按需导入组件库：

// 仅引入需要的组件
import { Button } from 'vant';

3. 使用 Tree Shaking

确保项目启用 ES6 模块化，Webpack 会自动移除未使用代码：

  • 检查 package.json 是否包含 "sideEffects": false。

4. 压缩与混淆

生产构建时自动启用压缩，检查 vue.config.js：

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true
    }
  }
};

5. 分析依赖体积

使用 webpack-bundle-analyzer 分析：

npm run build:app-plus -- --report

查看报告并针对性移除大体积依赖。

6. 替换或精简库

  • 将 moment.js 替换为 dayjs
  • 使用 lodash-es 替代 lodash

7. 图片资源优化

  • 压缩图片（TinyPNG）
  • 使用 CDN 托管图片

8. 检查重复依赖

运行 npm ls <package-name> 检查版本冲突，统一依赖版本。

注意事项：

  • 分包后首次加载仍会下载主包，但速度提升明显
  • H5 平台可使用 Preload 预加载关键资源
  • 小程序平台注意分包大小限制（主包 ≤ 2MB）

优先实施前 3 项，通常可减少 30%-60% 体积。建议结合构建分析报告针对性优化。

回到顶部