分包配置必须放在pages.json根级,subPackages为数组且每项含root和pages;跳转需用完整路径;static/common资源默认进主包,分包资源须相对路径引用并显式声明。

分包不是加个配置就自动生效的,配错位置、路径写错、跳转方式不对,90% 的“分包没用”问题都出在这三处。
pages.json 里 subPackages 字段必须放在根级,不能嵌套
很多人把 subPackages 写在 pages 数组里、或塞进 h5 字段下、甚至和 subNVue 混在一起——这些位置全都不生效。它必须和 pages、tabBar 并列,处于 pages.json 最外层对象中。
-
subPackages是数组,每一项必须含root(相对src的子目录,不能以/或..开头)和pages(该分包内页面路径数组) - 例如:
"root": "subPackages/user"✅,"root": "/subPackages/user"❌,"root": "subPackages/user/"❌ - 主包的
pages数组里,绝对不能出现子包内的路径,否则编译报错:SubPackage page not found - 微信开发者工具里看不到效果?先检查控制台有没有
subPackages is not an array这类语法错误
分包页面跳转必须用完整路径,uni.navigateTo 不会自动补前缀
uni-app 不会帮你推导当前在哪个分包,url 字段必须是带根路径的完整写法,漏掉任何一级都会白屏或 404。
- 正确:
uni.navigateTo({ url: '/subPackages/user/pages/profile/profile' }) - 错误:
uni.navigateTo({ url: 'profile' })、uni.navigateTo({ url: 'pages/profile/profile' })、uni.navigateTo({ url: 'subPackages/user/pages/profile/profile' })(缺开头/) - 用
uni.switchTab跳转时,目标页必须在tabBar.list中,且路径必须属于主包——子包页面不能作为 tab 页 - 动态拼接路径时,务必
url.trim(),空格或换行会导致静默失败
static 和 common 资源默认打进主包,分包里放了也没用
这是最隐蔽的体积膨胀点:你在 subPackages/user/static/ 下放了 1MB 图片,构建后它依然会被打到主包,因为 uni-app 默认只认项目根目录下的 static 和 common。
- 分包专用资源,必须显式声明在分包目录内,且通过
require('./static/avatar.png')这种相对路径引用(不能用@/static/) - 公共组件如果被多个分包引用,它仍会进主包;只被一个分包引用,才可能进该分包——但前提是它物理位置在分包目录里
- 检查最终产物:
dist/build/mp-weixin/subPackages/user/下有没有你预期的 js/css/image,没有就说明资源没走分包逻辑 - 启用分包优化需在
manifest.json对应平台下加:"optimization": {"subPackages": true}(仅对小程序平台有效)
vendor.js 过大才是主包超限的真正元凶,分包只是缓解手段
很多项目配完分包,主包还是 2.1MB——因为 vendor.js 占了 1.8MB,而分包配置本身不拆 vendor,它只影响业务代码和静态资源的归属。
- 查体积:打开
dist/build/mp-weixin/,直接看文件大小排序,vendor.js和最大的几张图通常是罪魁祸首 - echarts 等重型库必须按需引入:
import * as echarts from 'echarts/lib/echarts'+require('echarts/lib/chart/line'),而不是import * as echarts from 'echarts' - UI 库如 uView 必须配
babel-plugin-import,否则import { uButton } from 'uview-ui'仍是全量打包 - 图片别直接拖进
static/,先用tinypng或sharpCLI 批量压缩,单张未处理截图超 2MB 很常见
分包本身不解决 vendor 体积,也不自动压缩资源;它只提供一种“物理隔离+按需加载”的组织方式。真正卡住上线的,永远是那几个没被 tree-shaking 掉的函数、那几张忘压缩的 PNG、还有配置里多写的那个斜杠。


















