小程序如何使用分包加载的实现方法


Posted in Javascript onMay 22, 2019

"离线包"机制

微信小程序采用的是类似离线包加载方案,以转转小程序为例,当用户第一次打开时会先下载好所有代码,然后再加载页面;当用户再次进入转转小程序时,会直接使用已下载的代码,省去了代码下载的过程,打开速度更快。

看似很美好的设计,但有两个问题:

  • 第一次打开转转小程序时白屏时间很长,因为要下载接近2.5M的代码量,也就是说你的代码越多,白屏时间越长,而转转APP采用的网页离线机制体验更佳:在用户打开APP时就下载/更新离线包,这样在用户进入对应的网页时,代码已经下载好了,没有漫长的白屏过程。
  • 代码有部分更新时,没办法进行增量更新,导致每次发版后,用户都需要重新下载全部代码

问题看似不大,但对转转有很大影响,例如进行微信广告投放时,用户从点击广告到加载第一个页面之间的流失率竟能到达40%,这显然是FE无法接受的性能,而小程序分包加载机制能够在一定程度上解决上述问题。

分包加载

小程序的分包加载机制实际上是离线包和M页的一种结合机制,即你可以把代码划分成主包+N个分包,官方定义:

在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示。

总结如下:

  • 打开小程序,默认先加载主包
  • 进入分包页面时,再加载对应分包

特性

  • 1.7.3 及以上基础库开始支持,不支持的版本默认使用整包的方式
  • 整个小程序所有分包大小不超过 4M,单个分包/主包大小不能超过 2M
  • 分包数量目前没有限制,也就是说你可以放N个分包,甚至每个页面一个分包
  • 入口页面/TAB页面必须在主包里

关于主包

  • 第一次进入小程序,默认下载主包代码
  • 分包以外的所有代码,都会被打入主包
  • 分包内代码可以引用主包内代码

关于分包

  • 因为存在资源依赖关系,微信的机制是先下载主包,后下载分包
  • 分包目录不能在主包目录下面
  • 分包可以引用自己包内、主包内的资源,不能引用其他分包内的资源

这样的好处是进入主包页面时,需要下载的代码量小了很多,白屏时间更短,体验更佳。

在小程序开发的过程中,小程序的体积会随着版本的迭代变的越来越大,这时候我们就希望能够将小程序分成多个包从服务器下载,这样既可以加快首屏的渲染也便于后续按需加载的实现。小程序在微信客户端 6.6.0,基础库 1.7.3 及以上版本开始支持 分包功能。

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。

小程序如何使用分包加载的实现方法

配置方法

小程序如何使用分包加载的实现方法

配置例子

{
 "pages": ["pages/index", "pages/shopcart"],
 "subpackages": [
  {
   "root": "packageA",
   "pages": ["pages/mine", "pages/order"]
  },
  {
   "root": "packageB",
   "name": "pack2",
   "pages": ["pages/detail", "pages/pay"]
  }
 ]
}
├── app.js
├── app.json
├── app.wxss
├── packageA
│  └── pages
│    ├── mine
│    └── order
├── packageB
│  └── pages
│    ├── pay
│    └── detail
├── pages
│  ├── index
│  └── shopcart
└── utils

打包原则

  • 声明 subpackages 后,将按 subpackages 配置路径进行打包,subpackages 配置路径外的目录将被打包到 app(主包) 中
  • app(主包)也可以有自己的 pages(即最外层的 pages 字段)
  • subpackage 的根目录不能是另外一个 subpackage 内的子目录
  • tabBar 页面必须在 app(主包)内

引用原则

  • packageA 无法 require packageB JS 文件,但可以 require app、自己 package 内的 JS 文件
  • packageA 无法 import packageB 的 template,但可以 require app、自己 package 内的 template
  • packageA 无法使用 packageB 的资源,但可以使用 app、自己 package 内的资源

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 #Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 #Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
vue项目中mock.js的使用及基本用法
May 22 #Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
2013/12/31 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python2包含中文报错的解决方法
2018/07/09 Python
先进班级集体事迹材料
2014/01/30 职场文书
火车来了教学反思
2014/02/11 职场文书
军训自我鉴定200字
2014/02/13 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
2014年工程部工作总结
2014/11/25 职场文书
个人年度总结报告
2015/03/09 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis