uniapp vue3 小程序分包 vendor 会把分包页面js也打包进主包是什么原因

在使用uniapp+vue3开发微信小程序时遇到了分包问题：按照官方文档配置了分包，但发现vendor.js会把分包页面的JS代码也打包进主包，导致主包体积过大。检查了分包路径配置是正确的，但编译后依然存在这个问题。想请教下这是什么原因导致的？是webpack配置需要调整还是uniapp本身的限制？有没有解决方法可以确保分包代码不被vendor打包进主包？

2 回复

Vue3中，vendor可能将分包页面的JS打包进主包，原因是分包配置不当或依赖未正确分离。检查pages.json的分包配置，确保页面路径正确，并检查组件依赖是否被主包引用。


在 UniApp Vue3 小程序中，分包页面的 JS 被错误打包进主包 vendor 通常由以下原因引起：

主要原因

1. 依赖引用问题

  • 分包页面引用了主包依赖
  • 公共组件或工具函数被错误引用

2. 配置问题

分包配置不正确：

// pages.json
{
  "subPackages": [{
    "root": "subpackage",
    "pages": [{
      "path": "index",
      "style": { "navigationBarTitleText": "分包页面" }
    }]
  }]
}

3. 代码分割配置

Vue3 的代码分割可能未正确配置

解决方案

1. 检查依赖引用

确保分包页面只引用分包内的资源：

// 分包页面中避免这样引用
import { utils } from '@/common/utils' // 可能被打入主包

// 改为分包内相对路径
import { utils } from '../../common/utils'

2. 优化分包配置

// pages.json
{
  "subPackages": [{
    "root": "subpackageA",
    "pages": [
      // 分包页面
    ]
  }],
  "preloadRule": {
    "subpackageA/index": {
      "network": "all",
      "packages": ["subpackageA"]
    }
  }
}

3. 配置优化

在 vue.config.js 中：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'initial',
            enforce: true
          }
        }
      }
    }
  }
}

4. 构建分析

使用构建分析工具检查打包结果：

# 生成分析报告
npm run build:mp-weixin --report

检查要点

  1. 确认所有分包页面都在 subPackages 中声明
  2. 避免跨分包引用
  3. 检查第三方库是否被正确分割
  4. 验证公共组件的引用路径

通过以上调整，通常可以解决分包 JS 被打入主包 vendor 的问题。

回到顶部