微信小程序分包加载实战

"离线包"机制

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

看似很美好的设计，但有两个问题：

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

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

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

分包加载

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

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

总结如下：

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

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

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