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


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 相关文章推荐
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
jQuery动画与特效详解
Feb 01 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 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/01 无线电
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
想学python 这5本书籍你必看!
2018/12/11 Python
使用Tkinter制作信息提示框
2020/02/18 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
小学生家长评语大全
2014/02/10 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫