微信小程序之分包加载的那些事

微信小程序中使用分包加载，可以优化首次启动加载时间。 小程序对包大小的限制为：

单个包或者主包的大小不能超过2M；整个小程序所有分包的大小不能超过8M；

项目结构

├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── A │ └── B ├── packageB │ └── pages │ ├── C │ └── D ├── pages │ ├── index │ └── logs └── utils

接着在app.json中配置项目分包结构：

{ "pages": [ "pages/index/index", "pages/log/log" ], "subpackages": { { "root": "packageA", // 分包根目录 “name”: "packA", // 分包别名，预下载可以用到 "pages": [ "pages/A", // packageA下的pages "pages/B" ] }, { "root": "packageB", "pages": [ "pages/C", // packageB下的pages "pages/D" ] } } } 配置subpackages后，将按subpackages配置的路径进行打包，没有配置的都会分到主包。所以一定要配置好路径，避免主包超过限制报错tabBar必须放在主包分包之间不能引用，只能require app.js和自身的js配置完分包之后检查主包配置的路径有没有包含分包的，记得去掉主包中分包的路径

预下载

当小程序进入到某个页面的时候，可以先预下载可能需要的分包，提升页面的打开速度

{ "pages": [ "pages/index/index", "pages/log/log" ], "subpackages": { { "root": "packageA", // 分包根目录 “name”: "packA", // 分包别名，预下载可以用到 "pages": [ "pages/A", // packageA下的pages "pages/B" ] }, { "root": "packageB", “name”: "packB", // 分包别名，预下载可以用到 "pages": [ "pages/C", // packageA下的pages "pages/D" ] } }, "preloadRule": { "pages/index/index": { "network": "all", // 指定网络下载，all：不限网络，wifi：仅wifi可下载 "packages": [ "packA" // 分包时起的name ] }, "pages/log/log": { "network": "all", "packages": [ "packB" // 分包时起的name ] } } }

限制

同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。

如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。