必须在manifest.json对应平台节点下显式配置"optimization": {"subPackages": true},否则分包及预加载完全不生效;微信、QQ、百度小程序配mp-weixin节点,App端配app-plus节点,H5端忽略该字段。
manifest.json 必须开启 subPackages 开关
不加这行配置,所有分包和预加载规则都无效——不是慢,是根本不会触发下载。微信、qq、百度小程序必须在 mp-weixin(或对应平台)节点下显式启用:
"optimization": {"subpackages": true}app 端同理,要配在 app-plus 节点下;h5 端忽略该字段,填了也白填。自定义构建时注意确认你编辑的是最终生效的 manifest.json,hbuilderx 中右键项目 → “manifest.json” → 源码视图可验证。
pages.json 的路径必须三处严格一致
uni-app 不做路径容错,写错一个字符就失效。关键三处对齐:
-
subPackages数组中每个对象的root值(如"subpkg/user")必须与packages数组中的字符串完全相同,不能带./、不能少目录层级、不能大小写混用(iOS 敏感) -
preloadRule的 key 必须是pages.json中pages或subPackages.pages里定义的**完整路径字符串**,含后缀,不含开头斜杠:正确是"pages/my/my",错误是"my"、"pages/my"、"/pages/my/my" -
subPackages字段必须写在pages.json根级,不是嵌套在其他字段里;它只对小程序平台生效,App/H5 不识别
分包内引用大型依赖(如 ECharts)必须物理隔离
直接 import * as echarts from 'echarts' 会把全量代码打进主包 vendor,哪怕只在分包页面里写。因为 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显式声明
真机调试时如何确认分包是否真正加载
别只看配置有没有报错,得看网络行为是否真实发生:
- 微信开发者工具 → 「网络」面板,搜索
preloading或downloadSubNVue,有请求发出才说明生效 - TabBar 页面必须放在
pages数组里,不能只塞进subPackages,否则启动白屏 -
network: "all"别一上来就开,弱网下可能拖慢首屏;开发期先设"wifi"验证逻辑,再逐步放开 - App 端不支持
network参数,填了无效;预加载只对小程序平台起作用
分包不是“挪个目录就完事”,它是一套需要三重路径对齐、依赖隔离和运行时验证的机制。最容易被忽略的是 manifest 开关和 root 字符串的完全匹配——漏掉任意一个,整个分包链就断在第一步。


















