前端【小程序】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下预下载
posted @ 2024-04-17 21:06  为你编程  阅读(45)  评论(0)  编辑  收藏  举报