前端【小程序】05-小程序基础篇【分包加载】
一、分包加载
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
分包加载是优化小程序加载速度的一种手段。
1.1 为什么?
- 微信平台对小程序单个包的代码体积限制为 2M,超过 2M 的情况下可以采用分包来解决
- 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现按需加载
- 配置文件能忽略的只有静态资源,代码无法被忽略
- 拆分出多个包,这样首次加载小程序的时候只会加载主包,主包越小,加载速度越快,用户体验越好
1.2 使用分包
在全局配置app.json中使用 subPackages 来配置分包的根目录和分包中的页面路径:
app.json文件
1 { 2 "entryPagePath": "pages/index/index", 3 "pages": [ 4 "pages/index/index", 5 "pages/logs/logs" 6 ], 7 "subPackages": [ // 分包配置 8 { 9 "root": "pkg_house", // 指定分包的根目录 10 "pages": [ // 指定分包中的页面路径,有多个页面则多个路径 11 "list/list", 12 "detail/detail" 13 ] 14 }, 15 { 16 "root": "pkg_repair", 17 "pages": [ 18 "list/list", 19 "detail/detail" 20 ] 21 } 22 ], 23 "window": { 24 "navigationBarTextStyle": "black", 25 "navigationBarTitleText": "Weixin", 26 "navigationBarBackgroundColor": "#ffffff" 27 }, 28 "style": "v2", 29 "componentFramework": "glass-easel", 30 "sitemapLocation": "sitemap.json", 31 "lazyCodeLoading": "requiredComponents" 32 }
- root 指定分包的根目录
- pages 指定分包中的页面路径
- tabBar的页面不允许分包,必须包含在主包中
- 所有包不超过20M
注:根目录和路径不存在时,小程序开发者工具会自动创建。
跳转到分包页面和之前正常写法一样,写相对或者绝对路径
1 <navigator url="/pkg_house/list/list">跳转到分包页面</navigator>
1.3 分包预加载
在实际使用分包的过程中,纯粹的按需加载也不是最优的方案,可以将即将访问的页面的包预先下载下来,这样能进一步提升小程序加载的速度,通过 preloadRule 来配置预加载的包:
文档:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html
app.json文件
1 { 2 "entryPagePath": "pages/index/index", 3 "pages": [ 4 "pages/index/index", 5 "pages/logs/logs" 6 ], 7 "subPackages": [ 8 { 9 "root": "pkg_house", 10 "pages": [ 11 "list/list", 12 "detail/detail" 13 ] 14 }, 15 { 16 "root": "pkg_repair", 17 "pages": [ 18 "list/list", 19 "detail/detail" 20 ] 21 } 22 ], 23 "preloadRule": { 24 // key 是页面路径,value 是进入此页面的预下载配置 25 "pkg_house/list/list": { 26 "network": "all", // 不限网络环境 27 "packages": ["pkg_repair"] // 进入此pkg_house/list/list页面, 预加载分包pkg_repair 28 }, 29 "pkg_house/detail/detail": { 30 "packages": ["pkg_repair"] // 指定要预加载的分包root或者name 31 } 32 } 33 "window": { 34 "navigationBarTextStyle": "black", 35 "navigationBarTitleText": "Weixin", 36 "navigationBarBackgroundColor": "#ffffff" 37 }, 38 "style": "v2", 39 "componentFramework": "glass-easel", 40 "sitemapLocation": "sitemap.json", 41 "lazyCodeLoading": "requiredComponents" 42 }
上述代码的含义是在加载 pages/framework/index 页面时,自动的去加载 subpkg_user 这个分包,等到要访问这个分包中的页面时会直接打开。
preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:
字段 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
packages | StringArray | 是 | 无 | 进入页面后预下载分包的 root 或 name 。__APP__ 表示主包。 |
network | String | 否 | wifi | 在指定网络下预下载,可选值为:all : 不限网络wifi : 仅wifi下预下载 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步