分包不生效主因是pages.json中subpackages未置根级、路径大小写错误或manifest.json漏配平台专属optimization开关;subpackages必须根级声明,路径严格匹配目录且无多余字符,微信等平台需在mp-weixin节点下配置"optimization": {"subpackages": true}。

分包不生效,90% 是因为 pages.json 里 subPackages 没写对位置、路径大小写错,或 manifest.json 漏了平台专属的 optimization 开关——不是逻辑问题,是配置硬性校验失败。
pages.json 的 subPackages 必须写在根级,且路径严格匹配目录结构
uni-app 不做路径容错,写错一个字符就跳过整个分包逻辑。常见错误包括:
-
subPackages嵌套在tabBar或h5字段下(必须是pages.json最外层同级字段) -
root值写成"subPackages/user/"(结尾斜杠非法)或"./subPackages/user"(开头点号非法),正确应为"subPackages/user" - 真实目录是
subpackages/user/,但配置写了"subPackages/user"(iOS 小程序会直接忽略) -
pages数组中某页路径写成"pages/user/profile",但该文件实际在subPackages/user/pages/profile.vue,导致找不到页面
manifest.json 必须按平台显式开启 subPackages 优化开关
这个配置不加,分包和预加载全部无效——不是慢,是根本不会触发下载。不同平台写法不同:
- 微信/qq/百度小程序:在
mp-weixin节点下加"optimization": {"subPackages": true} - App 端:在
app-plus节点下加相同配置 - H5 端:忽略该字段,填了也不生效
- 自定义构建时注意确认你编辑的是最终生效的
manifest.json;HBuilderX 中右键项目 → “manifest.json” → 源码视图可验证是否已写入对应平台节点
分包内引用 ECharts 等大型依赖必须物理隔离
直接 import * as echarts from 'echarts' 会导致全量代码打进主包 vendor.js,哪怕只在分包页面里 import。这是因为 webpack 默认把跨分包共享模块提升到主包。
- 把
echarts.min.js放进分包目录,例如subPackages/analysis/echarts.min.js - 在分包页面中用相对路径引入:
import * as echarts from '@/subPackages/analysis/echarts.min.js' - 避免在分包里
import主包components/下的组件,否则该组件及其深层依赖(如 uView、lodash)会被拉入主包 - 多个分包共用图表逻辑?不要复制文件,改用
npm link或私有包 +dependencies显式声明
preloadRule 预加载不触发?先看触发条件和网络策略
写了规则却没看到请求发出,大概率是生命周期或网络条件没匹配上。微信的预加载只在特定时机触发,且只对「未加载过的分包」有效。
-
preloadRule必须和subPackages同级,写在某个分包对象内部无效 - 触发页面必须是主包里的页面(如
"pages/index/index"),不能是分包内页面 -
key必须是pages.json中pages或subPackages.pages里定义的**完整路径字符串**,含后缀,不含开头斜杠:正确是"pages/my/my",错误是"my"、"pages/my"、"/pages/my/my" -
network: "all"别一上来就开,弱网下可能拖慢首屏;开发期先设"wifi"验证逻辑,再逐步放开;App 端不支持network参数,填了无效果
真机调试时别只看配置有没有报错,得看网络面板是否真实发出 preloading 或 downloadSubNVue 请求——这是唯一能确认分包真正加载的依据。











