uniapp vendor.js太大如何优化解决

在使用uniapp开发时，发现打包后的vendor.js文件体积过大，导致首屏加载缓慢。请问有哪些有效的优化方案可以减小vendor.js的体积？比如代码分割、按需引入、压缩混淆等方法具体该如何操作？有没有实际项目中的最佳实践可以参考？

2 回复

uniapp vendor.js 文件过大，可以这样优化：

  1. 分包加载：将非核心页面拆分为分包，减少主包体积。在 manifest.json 中配置分包规则。

  2. 按需引入：避免全量引入第三方库，比如使用 babel-plugin-import 按需导入 UI 组件。

  3. 压缩代码：开启生产环境压缩，在 vue.config.js 中配置 uglify 或 terser 进行代码混淆和压缩。

  4. Tree Shaking：利用 webpack 的 Tree Shaking 功能，移除未使用的代码。

  5. CDN 引入：将部分依赖改为 CDN 引入，减少打包体积。

  6. 图片优化：压缩图片，或使用云存储/CDN 加载图片资源。

  7. 分析打包文件：使用 webpack-bundle-analyzer 分析依赖，针对性优化。

简单处理：先开启分包和压缩，再检查是否有冗余依赖。


UniApp 的 vendor.js 文件过大通常是由于第三方依赖过多或打包配置不当导致的。以下是几种有效的优化方案：

1. 启用分包加载

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

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

2. 按需引入第三方库

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

import { debounce } from 'lodash-es'; // 而非 import _ from 'lodash'

3. 使用 Tree Shaking

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

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

4. 压缩与混淆

在 HBuilderX 中勾选“运行→运行到小程序模拟器→运行时是否压缩代码”选项，或通过 CLI 配置：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true
    }
  }
};

5. CDN 外部化

将大型库（如 Vue、Moment.js）通过 CDN 引入，修改 vue.config.js：

module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'moment': 'moment'
    }
  }
};

同时在 index.html 中添加 CDN 链接。

6. 图片资源优化

  • 压缩图片（使用 TinyPNG 等工具）。
  • 将图片上传至 CDN，减少本地资源体积。

7. 分析打包内容

使用 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()]
  }
};

8. 清理未使用代码

检查并移除项目中没有用到的组件和依赖。

总结建议：

优先采用 分包加载 和 按需引入，结合压缩和 CDN 外部化，通常能显著减小 vendor.js 体积。定期使用分析工具检查依赖，保持代码精简。

回到顶部