分包加载

分包加载

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

前言

小程序寄生于微信的环境下，在一些复杂和通用的情况下，需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用的时候可以实现按需加载

在构建小程序分包项目时，会输出一个或多个分包，每个使用分包的小程序必须含有一个主包（默认放置启动页/TabBar页面，以及分包需要使用的公共资源/JS脚本）

小程序启动时，默认会下载主包并启动包内页面，当用户进入分包内页面时，客户端将对应的分包下载，进行展示

主要限制：

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

对小程序进行分包，解除一个包的大小2M的限制，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

使用分包

配置方法

字段	类型	说明
root	String	分包根目录
name	String	分包别名，分包预下载 (opens new window)时可以使用
pages	StringArray	分包页面路径，相对与分包根目录
independent	Boolean	分包是否是独立分包 (opens new window)

打包原则

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

引用原则

• packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件；使用 分包异步化 (opens new window) 时不受此条限制
• packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
• packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

独立分包

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

开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

一个小程序中可以有多个独立分包。

限制

独立分包属于分包的一种。普通分包的所有限制都对独立分包有效。独立分包中插件、自定义组件的处理方式同普通分包。

此外，使用独立分包时要注意：

• 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 (opens new window) 时 js 文件、自定义组件、插件不受此条限制）
• 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
• App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
• 独立分包中暂时不支持使用插件。

与普通分包不同，独立分包运行时，App 并不一定被注册，因此 getApp() 也不一定可以获得 App 对象

关于App生命周期

当从独立分包启动小程序时，主包中 App 的 onLaunch 和首次 onShow 会在从独立分包页面首次进入主包或其他普通分包页面时调用。

由于独立分包中无法定义 App，小程序生命周期的监听可以使用 wx.onAppShow (opens new window)，wx.onAppHide (opens new window) 完成。App 上的其他事件可以使用 wx.onError (opens new window)，wx.onPageNotFound (opens new window) 监听。

分包预下载

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

分包预下载目前只支持通过配置方式使用，暂不支持通过调用API完成

预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制

字段	类型	必填	默认值	说明
packages	StringArray	是	无	进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
network	String	否	wifi	在指定网络下预下载，可选值为： all: 不限网络 wifi: 仅wifi下预下载

**注：**预加载也是会占用包的体积的

分包异步化

在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。

一个分包使用其他分包的自定义组件时，由于其他分包还未下载或注入，其他分包的组件处于不可用的状态。通过为其他分包的自定义组件设置 占位组件 (opens new window)，我们可以先渲染占位组件作为替代，在分包下载完成后再进行替换