uniapp 转小程序 vendor.js 太大如何优化

在使用uniapp开发小程序时，发现打包后的vendor.js文件体积过大，导致小程序加载缓慢。尝试过配置分包和压缩代码，但效果不明显。请问有哪些有效的优化方案可以减小vendor.js的体积？比如是否可以通过按需引入、移除未使用的依赖或进一步优化构建配置来解决？希望有经验的朋友能分享具体操作步骤和注意事项。

2 回复
  1. 分包加载：将vendor.js拆分成多个子包，按需加载。
  2. 代码压缩：使用Terser等工具压缩代码，移除注释和空格。
  3. 按需引入：只引入必要的第三方库，避免全量导入。
  4. 公共代码提取：将公共依赖提取到主包，减少重复。
  5. 使用小程序原生组件替代部分UI库。

UniApp 打包小程序时，vendor.js 文件过大的常见原因及优化方案如下：

1. 启用分包加载

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

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

2. 按需引入组件/库

  • 避免全局引入第三方库（如 lodash），改用按需导入：
// 错误示例：import _ from 'lodash'
// 正确示例：import debounce from 'lodash/debounce'

3. 使用小程序原生组件

替换部分 UniApp 组件为小程序原生组件（如 picker、video），减少打包体积。

4. 压缩静态资源

  • 对图片等资源进行压缩（工具如 TinyPNG）。
  • 移除未使用的代码，利用 webpack-bundle-analyzer 分析依赖。

5. 配置代码分割

在 vue.config.js 中优化 webpack 配置：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000,
        cacheGroups: {
          vendor: {
            name: 'vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: 10
          }
        }
      }
    }
  }
};

6. 检查冗余依赖

  • 删除 package.json 中未使用的依赖。
  • 使用 webpack-bundle-analyzer 分析模块体积。

7. 启用小程序压缩

在微信开发者工具中勾选 “上传时压缩代码”。

总结步骤：

  1. 优先分包降低主包体积。
  2. 按需引入第三方库。
  3. 压缩资源并移除无用代码。
  4. 通过工具分析依赖，针对性优化。

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

回到顶部