微信小程序分包加载学习

1、为什么要分包加载

因为小程序越来越大，代码越来越多
不用分包：第一次打开要加载所有代码，时间太久
使用分包：不用加载所有代码，在用户使用的时候根据其需求进行加载对应的分包
即：在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
这样小程序加载流程变成了：
1、首次启动时，先下载小程序主包，显示主包内的页面；
2、如果用户进入了某个分包的页面，再下载这个对应分包，下载完毕后，显示分包的页面。
所以：对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

注意：

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

---

2、怎么使用分包

官方规定支持分包的最低版本：

微信客户端 6.6.0，基础库 1.7.3 及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本，

1，修改目录

使用分包并不用对目前代码做什么修改，仅仅修改一下代码的目录文件和配置文件即可。

例如我们把小程序的目录结构修改成如下：

划分分包的时候我们要遵循一下原则：

避免分包与分包之间引用上的耦合（即分包之间不要有啥引用关系）。因为分包的加载是由用户操作触发的，并不能确保某分包加载时，另外一个分包就一定存在（不一定下载好了），这个时候可能会导致 JS 逻辑异常的情况，例如报「”xxx.js” is not defined」这样的错误；
一些公共用到的自定义组件，需要放在主包内。

目录修改后我们要注意会发生以下变化：

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源
即引用主包或自己这个分包的东西，这是确保已经下载好了的

2，修改app.json

从app.json的配置中我们可以看出，pages里面只有主包的两个页面，那么加载速度必然会提升很多。

subPackages的具体参数含义：

修改app.json要注意一下几点：

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

---

3、独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载

使用场景：将某些具有一定功能独立性的页面配置到独立分包中可以提高加载速度，一个小程序中可以有多个独立分包

配置很简单，加关键字“independent:true”

分包限制

1.独立分包属于分包的一种。普通分包的所有限制都对独立分包有效

2.独立分包中不能依赖主包和其他分包中的内容（打开普通分包时主包和分包本身都已经下载好了 ，所以可以引用；但是独立分包不需要先下载主包，所以只能引用自己，不能依赖其他的），包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式

3.App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；

4.独立分包中暂时不支持使用插件。

注意事项

1.getApp()无法获取app实例，无法实现独立分包和小程序其他部分的全局变量共享

为了在独立分包中满足这一需求，基础库 2.2.4 版本开始 getApp支持 allowDefault参数，在 App 未定义时返回一个默认实现。当主包加载，App被注册时，默认实现中定义的属性会被覆盖合并到真正的 App 中

关于生命周期

当从独立分包启动小程序时，主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。
由于独立分包中无法定义 App，小程序生命周期的监听可以使用 wx.onAppShow，wx.onAppHide 完成。App 上的其他事件可以使用 wx.onError，wx.onPageNotFound 监听。

---

4、分包预下载

分包肯定不会只有优点没有缺点。 使用分包的时候我们就会发现，虽然加载首页 的时间变短了，但是当我们打开分包的时候，会有一个明显的加载过程。 而且在安卓手机里会有一个系统级别的加载loading。
那么如何解决分包的这个副作用呢？
其实通过分包预下载就可以轻松避免这个问题。

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

限制

同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。

其实分包预下载也就那样，弊端：

就像分包那样，分包预下载也有自己的不足。
分包预下载就是在进入小程序某个页面时，提前加载当前页面的下个页面的包。因此，相当于当前页面要加载两个当前页面和下个页面两个包。那么必定会对当前页面的加载速度产生影响。
该下载的还是得下载。
结论：
虽然分包预下载可以避免跳转到具体分包时产生的loading，但是它会对当前页面的加载速度产生较大影响。