前端【小程序】04-小程序基础篇【分包加载】

一、分包加载

　　官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html​

　　分包加载是优化小程序加载速度的一种手段。

1.1 为什么？​

• 微信平台对小程序单个包的代码体积限制为 2M，超过 2M 的情况下可以采用分包来解决
• 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现按需加载
• 配置文件能忽略的只有静态资源，代码无法被忽略
• 拆分出多个包，这样首次加载小程序的时候只会加载主包，主包越小，加载速度越快，用户体验越好

1.2 使用分包​

　　在全局配置app.json中使用 subPackages 来配置分包的根目录和分包中的页面路径：

 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

1 {
2   "preloadRule": {
3     "pages/framework/index": {
4       "network": "all",  
5       "packages": ["subpkg_user"]
6     }
7   }
8 }

　　上述代码的含义是在加载 pages/framework/index 页面时，自动的去加载 subpkg_user 这个分包，等到要访问这个分包中的页面时会直接打开。