小程序学习笔记-使用分包

时间:2019-05-11 09:49来源:计算机教程
"离线包"机制 微信小程序采用的是类似离线包加载方案,以 转转 小程序为例,当用户第一次打开时会先下载好所有代码,然后再加载页面;当用户再次进入转转小程序时,会直接使用

"离线包"机制

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

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

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

  • 代码有部分更新时,没办法进行增量更新,导致每次发版后,用户都需要重新下载全部代码

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

图片 1小程序LOGO.png

分包加载

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

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

总结如下:

  • 打开小程序,默认先加载主包

  • 进入分包页面时,再加载对应分包

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

我们在开发小程序之初,肯定先要了解小程序开发的种种限制。相信童鞋一定会为官方的小程序包大小不得超过2M这一限制而头疼不已,好不容易爬坑出来,到了提交发布代码这关键一步,却因为代码体积超限迫使含辛茹苦撸出的小程序胎死腹中...啊,多么痛的领悟~

特性

  • 1.7.3 及以上基础库开始支持,不支持的版本默认使用整包的方式

  • 整个小程序所有分包大小不超过 4M,单个分包/主包大小不能超过 2M

  • 分包数量目前没有限制,也就是说你可以放N个分包,甚至每个页面一个分包

  • 入口页面/TAB页面必须在主包里

还好,官方推出了小程序分包加载这一功能:

关于主包

  • 第一次进入小程序,默认下载主包代码

  • 分包以外的所有代码,都会被打入主包

  • 分包内代码可以引用主包内代码

2018年6月15日周五23点43分,小程序发布官方公告:小程序分包加载功能升级,新增性能监控,意味着小程序的代码包总上限可提升至8M,但是分包的大小还是不超过2M。即可以使用1个主包,3个分包的方式达到8M的总的代码包大小。

关于分包

  • 因为存在资源依赖关系,微信的机制是先下载主包,后下载分包

  • 分包目录不能在主包目录下面

  • 分包可以引用自己包内、主包内的资源,不能引用其他分包内的资源

这对于广大开发者来说无疑是重大喜讯,废话不多说,动手之前建议认真阅读官方文档,以避免不必要的“趟坑之旅”,现罗列以下几点与诸位共勉:

  • 小程序的打包机制仅仅是根据文件目录打包,分包内require/import的任何文件,只要不在同一个目录下面,都不会被打进分包,也就是说,类库及一些公共文件,只能放在主包里面,如果主包分包划分不好的话,主包的大小也很难降下来

  • 安卓系统进入分包页面时,会出现一个丑陋的系统级的loading层,这一定程度上影响了安卓的体验

环境要求

微信 6.6 客户端,1.7.3 及以上基础库开始支持,请更新至最新客户端版本,开发者工具请使用 1.01.1712150 及以上版本,可点此下载

转转的分包加载

转转小程序在使用分包之前,压缩后的代码量大概是2.45M,也就是说,每个新用户第一次都需要下载的2.45M代码才能进入页面,使用分包机制后,主包大小降为1M左右,也就是说,如果是进入主包页面,下载时间大约降低了60%

文件结构:

├── libs

├── components

├── pages  主包根目录

├────index 首页

├────post  发布页

├────...

├── subPages  分包根目录

├────trade    交易分包

├────mine     我的页面分包

├────...

我们根据用户访问的轨迹,分成了20个左右的分包。 例如trade包,里面包含详情页、下单页、支付页、支付成功页等,这条线的页面,用户可能不需要一进入小程序就使用,但一旦使用可能是使用整个链条,因此可以作为一个分包。

如何分包

在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本,而分包则是根据开发者的配置进行划分。

目前小程序分包大小有以下限制:

整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 2M

在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示。对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

编辑:计算机教程 本文来源:小程序学习笔记-使用分包

关键词: