uni-app小程序分包失效的主因是pages.json中subpackages未置于根级、路径大小写错误、漏配mp-weixin专属配置;分包内需隔离echarts等依赖、避免引用主包资源与组件,并正确配置preloadrule及static路径。

主包超 2MB 就无法上传,不是配置没生效,就是分包根本没被识别——subPackages 字段写错位置、路径大小写不一致、或漏了 mp-weixin 平台专属配置,都会导致分包失效。
pages.json 的 subPackages 必须写在根级,不是 manifest.json
很多人把分包配置塞进 manifest.json 或 vue.config.js,结果构建后体积纹丝不动。uni-app 的分包逻辑只在小程序平台由 pages.json 驱动,且必须是根级字段。
-
subPackages是数组,每一项必须含root(合法路径,以/开头、不以/结尾)和pages(相对root的路径) -
root: "subPackages/user"对应真实目录subPackages/user/,不能写成"subPackages/user/"或"./subPackages/user" - TabBar 页面必须在主包的
pages数组里,写进subPackages会导致白屏或跳转失败 - iOS 小程序对路径大小写敏感,
subpackages/user和subPackages/user是两个不同分包
分包内引用 ECharts 等大型库,必须隔离路径和依赖
直接 import * as echarts from 'echarts' 会把全量代码打进主包 vendor,哪怕这个 import 只出现在分包页面里。因为 webpack 默认把跨分包共享模块提升到主包。
- 分包专用的 ECharts 必须放在分包目录下,例如
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";分包页的onShow不会触发预加载 -
network: "wifi"在真机蜂窝网络下静默失败,调试时建议设为"all" - 预加载只对目标分包本身有效,不能跨分包预加载(A 分包的规则不能触发 B 分包下载)
- 微信开发者工具中开启「调试基础库版本」并勾选「分包加载性能分析」,才能在 Network 面板看到
preloadSubpackages请求
分包体积仍超标?警惕 static 资源和隐式依赖
分包 root 目录下的 static 文件夹不会自动打包进对应分包——它默认归主包管。另外,看似独立的分包页面,可能因 import 了主包 utils 而把整个 utils/request.js 拉进来。
- 分包要用的图片、字体等资源,必须放在分包目录内的
static子目录,例如subPackages/activity/static/images/bg.png - 分包页面里别写
import request from '@/utils/request',改用import request from '@/subPackages/activity/utils/request'并单独维护 - 运行
npm run dev:mp-weixin --report查看webpack-bundle-analyzer报告,重点看哪些模块被重复打包进多个分包 vendor - 启用
SplitUtilPlugin插件可自动剥离「多分包共用但主包未引用」的模块,防止它们挤占主包空间
最常被忽略的是:分包不是“建个文件夹 + 改配置”就完事,而是整套路径、依赖、资源、构建配置的协同。哪怕一个大小写错误,iOS 上就直接白屏;哪怕一个 import 路径没改,ECharts 就还在主包里躺着。











