uniapp打包时mainpackage/common/vendor.js文件体积过大如何优化

在uniapp打包时发现mainpackage/common/vendor.js文件体积过大（超过1MB），导致首屏加载变慢。尝试过配置分包和开启压缩，但效果不明显。想请教：

  1. 有哪些具体的配置或插件可以减小vendor.js的体积？
  2. 是否需要手动拆分某些依赖到分包？
  3. 是否存在常见的冗余代码或未使用的依赖需要检查？
    求优化方案或排查思路。
2 回复
  1. 使用分包加载，将部分页面/组件移入分包。
  2. 检查并移除未使用的组件和库。
  3. 压缩图片等静态资源。
  4. 开启生产环境压缩，如uglify、terser。
  5. 使用webpack-bundle-analyzer分析依赖，针对性优化。

在UniApp打包时，mainpackage/common/vendor.js 文件体积过大通常是由于第三方依赖库过多或代码未合理拆分导致的。以下是几种优化方案：

1. 启用分包加载

在 pages.json 中配置分包，将部分页面和依赖拆分到子包中：

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

2. 按需引入第三方库

避免全量引入库，例如使用 lodash-es 替代 lodash：

// 不推荐
import _ from 'lodash';

// 推荐
import debounce from 'lodash-es/debounce';

3. 使用 Tree Shaking

确保项目启用 ES6 模块语法，并在 vue.config.js 中配置：

module.exports = {
  chainWebpack: (config) => {
    config.optimization.usedExports(true);
  }
};

4. 压缩与混淆代码

在HBuilderX中勾选“运行→运行到小程序模拟器→运行时是否压缩代码”选项，或通过 cli 构建时添加 --minimize 参数。

5. 图片资源优化

  • 压缩图片（使用工具如 TinyPNG）。
  • 将图片转换为 Base64 或使用网络路径减少文件数量。

6. 分析打包文件

使用 webpack-bundle-analyzer 分析依赖：

npm install --save-dev webpack-bundle-analyzer

在 vue.config.js 中添加：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
};

7. 移除未使用的代码

检查并删除未引用的组件、样式或库。

8. 升级 UniApp 和依赖

确保使用最新版本，以获得更好的优化支持。

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

回到顶部