uni-app小程序分包配置必须写在pages.json根级的subpackages字段中,为数组结构,每项含root(合法路径)和pages(相对路径),不可与subnvue混淆,且仅对小程序平台生效。

分包配置写在哪儿?subNVue 和 subPackages 别搞混了
uni-app 的小程序分包配置只在 pages.json 里生效,不是 manifest.json,也不是 vue.config.js。很多人一开始往错地方写,导致分包根本没加载、体积没拆、甚至报 subPackages is not an array 错误。
关键点:必须在 pages.json 的根级加 subPackages 字段(注意不是 subNVue,后者是原生子窗体,和分包无关)。
-
subPackages是数组,每一项是带root和pages的对象 -
root必须是合法路径,以斜杠开头但不以斜杠结尾(如"subPackages/home",不能写成"subPackages/home/") - 所有分包路径必须和实际目录结构严格一致,大小写敏感(尤其在 iOS 小程序里会直接白屏)
分包页面的 path 怎么写?别用绝对路径
分包内页面的 path 是相对于该分包 root 的相对路径,不是整个项目根目录。写错会导致跳转 404 或提示 page path is not found。
比如分包配置为:{"root": "subPackages/user", "pages": [{"path": "pages/profile/index"}]},那真实路径必须是 subPackages/user/pages/profile/index.vue —— 注意 pages 这层是包含在 root 内部的,不是项目根下的 pages/。
- 分包内不能引用主包的
components或utils,除非通过npm或static公共目录显式引入 -
onLoad里拿到的options和主包一致,但getCurrentPages()返回的页面栈里,分包路径会带前缀(如subPackages/user/pages/profile/index) - 使用
uni.navigateTo跳转分包页面时,url必须带完整路径(含分包前缀),不能省略
分包预加载失效?检查 preloadRule 的触发条件
小程序分包支持按需预加载,但 preloadRule 只在特定页面生命周期中生效(比如主包首页的 onShow),且仅对「即将访问」的分包有效。写完配置却没触发,大概率是场景没匹配上。
preloadRule 必须定义在 pages.json 的 subPackages 同级,不能嵌套进某个分包里;它的 network 字段默认是 all,但真机调试时若设为 wifi,切到蜂窝网络就静默失败。
- 预加载只对未加载过的分包生效,重复调用不会二次触发
- 不能跨分包预加载(A 分包的规则不能预加载 B 分包)
- 微信开发者工具里开启「调试基础库版本」并勾选「分包加载性能分析」,能看到预加载是否真正发起请求
分包体积超限或找不到 app-plus 相关资源?注意构建平台差异
uni-app 构建小程序时,subPackages 只影响微信/支付宝/百度等小程序平台,对 app-plus 或 h5 完全无效 —— 但很多人把 nativePlugins 或 weex 相关代码塞进分包,结果 App 端运行时报 require is not defined 或白屏。
另外,微信要求单个分包体积 ≤ 2MB(基础库 2.21.2+ 支持 8MB),但 uni-app 打包后计算的是压缩前体积。如果你用了大量图片或第三方库,很容易踩线,且错误提示只显示 subPackage size limit exceeded,不告诉你具体哪个文件超了。
- 用
uni-app-cli运行npx uni-app-cli analyze可生成体积报告(需 HBuilderX 3.7+ 或 CLI 3.0+) - 分包内不要放
App.vue、main.js、store实例,这些只能存在于主包 - 自定义组件如果被分包页面引用,它本身必须也在同一分包内,否则构建时报
component not found
最常被忽略的是:分包页面的 style 里用了 @import 引入主包样式变量,而该变量文件不在分包目录下 —— 构建不报错,但真机运行时样式丢失,且无任何提示。










