"离线包"机制

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

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

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

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

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

分包加载

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

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

总结如下:

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

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

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

特性

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

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

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

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

关于主包

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

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

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

关于分包

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

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

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

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

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

转转的分包加载

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

文件结构:

   ├── libs

   ├── components

   ├── pages  主包根目录

   ├────index 首页

   ├────post  发布页

   ├────...

   ├── subPages  分包根目录

   ├────trade    交易分包

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

   ├────...

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

历史入口兼容

一个页面放入分包之后,路径会发生变化,例如详情页由/pages/detail变为/subPages/trade/detail,意味着如果用户访问了以前的page则得不到正确的页面响应(例如:分享出去的小程序卡片、二维码、公众号推送消息等),这些静态不可改变的历史入口怎么办?我们目前采用如下方案:

原来主包内的每个页面都保留,但代码只保留跳转逻辑,用户进来后立即跳到对应的分包页面,用户几乎是无感知的

这样也会产生一点小问题:这些跳转页面也占用一定的空间,接下来我们会优化成在onLaunch、页面跳转时进行判断,直接跳入正确的分包页面。


以上是转转在分包加载方面的实战记录,欢迎小程序开发者与我们交流经验,如果您喜欢我们的文章,请关注"大转转FE"公众号或者知乎专栏。

微信小程序分包加载实战的更多相关文章

  1. 微信小程序 - 分包加载

    小程序开发大家都知道,对主包的大小进行了限制,从最初的1M变成了现再的2M,一般情况下是够用了:但是偶尔可能会出现超出2M的可能,我们可以对小程序进行分包加载. 1.小程序分包加载 a. 某些情况下, ...

  2. 微信小程序分包加载

    分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主 ...

  3. 微信小程序 - 分包加载(独立分包)

    独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行.从独立分包中页面进入小程序时,不需要下载主包.当用户进入普通分包或主包内页面时,主包才会被下载 将某些具有一定功能独立性的页面配置到 ...

  4. 微信小程序---分包加载(subpackages)及报错

    某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 分包很简单,具体步骤如下: 在app.json中,创建subPackages,root表示分包A的 ...

  5. 微信小程序 - 分包加载(预下载)

    开发者可以通过配置,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度.对于独立分包,也可以预下载主包. 配置方法 预下载分包行为在进入某个页面时触发,通过在 a ...

  6. 微信小程序 - 分包加载(分包使用)

    使用分包(建议主包添加跳转路径,分包放内容) 在app.json配置"subpackages" 在pages同级目录新建文件夹以及文件 打包原则 声明 subpackages 后, ...

  7. [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)

    本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...

  8. 微信小程序 图片加载失败处理方法

    微信小程序 官方文档对image 媒体组件加载失败 没有太多的解释,使用中出现了几个小问题,今天抽空记录一下 WXML: <image class="userinfo-avatar&q ...

  9. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

随机推荐

  1. matplotlib 绘图报错 RuntimeError: Invalid DISPLAY variable

    ssh 远程登录 Linux 服务器使用 matplotlib.pyplot 绘图时报错 原因: matplotlib 在 windows 下的默认 backend 是 TkAgg:在 Linux 下 ...

  2. Python脚本字符集问题

    运行脚本的时候,总是报错: SyntaxError: (unicode error) 'utf-8' codec can't decode byte 0xb9 in position 0: inval ...

  3. Go的并发调度原理

    Go语言是为并发而生的语言,Go语言是为数不多的在语言层面实现并发的语言:也正是Go语言的并发特性,吸引了全球无数的开发者.   并发(concurrency)和并行(parallellism) 并发 ...

  4. vue生命周期-mounted和created的区别

    详情请查看:https://blog.csdn.net/xdnloveme/article/details/78035065 自己做个总结: beforeCreate 创建之前:已经完成了 初始化事件 ...

  5. java中函数的参数传递

    转载  https://www.cnblogs.com/lixiaolun/p/4311863.html 转载https://www.cnblogs.com/wutianqi/p/8723582.ht ...

  6. 最小化webpack项目

    先把代码贴出来,以后慢慢加说明 参考资料:入门 Webpack,看这篇就够了 / webpack 搭建自动打开,刷新浏览器 一.功能代码1.index.html <!DOCTYPE html&g ...

  7. MySql共享锁和排它锁

    共享锁和排他锁 1.共享锁: 读锁.X锁,在查询时生效,多个事务在查询同一个数据时共享一把锁,但是不能作用于修改数据,在select语句后添加 lock in share mode : 2.排他锁:在 ...

  8. mysql读写分离——中间件ProxySQL的简介与配置

    mysql实现读写分离的方式 mysql 实现读写分离的方式有以下几种: 程序修改mysql操作,直接和数据库通信,简单快捷的读写分离和随机的方式实现的负载均衡,权限独立分配,需要开发人员协助. am ...

  9. jtag、在线仿真器

    指令集模拟器 1.部分集成开发环境提供了指令集模拟器,可方便用户在PC机上完成一部分简单的调试工作,但是由于指令集模拟器与真实的硬件环境相差很大,因此即使用户使用指令集模拟器调试通过的程序也有可能无法 ...

  10. JAVA 8 日期工具类

    JAVA 8 日期工具类 主题描述 JAVA中日期时间的历史 代码成果 主题描述 JAVA的日期时间一直比较混乱,本来以为joda会是巅峰,但是JAVA 8改变了我的思想.但是即便在JAVA 8面前, ...