小程序分包加载

2018-11-11 本文已影响8人 880d91446f17

开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必须包含

一个主包，所谓的主包，即放置默认启动页/TabBar 页面，以及一些所有分包需要用到

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

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更高的解耦协作。

配置方法：

假设支持分包的小程序目录结构

├── app.js
├── app.json
├── app.wxss
├── packageA
│  └── pages
│  ├── cat
│  └── dog
├── packageB
│  └── pages
│  ├── apple
│  └── banana
├── pages
│  ├── index
│  └── logs
└── utils

开发者通过在 app.json subPackages 字段声明项目分包结构：


{
 "pages":[
 "pages/index",
 "pages/logs"
 ],
 "subpackages": [
 {
 "root": "packageA",
 "pages": [
 "pages/cat",
 "pages/dog"
 ]
 }, {
 "root": "packageB",
 "name": "pack2",
 "pages": [
 "pages/apple",
 "pages/banana"
 ]
 }
 ]
}

subPackages 中，每个分包的配置有以下几项：

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

打包原则

1.声明 subPackages 后，将按 subPackages 配置路径进行打包，subPackages 配置路径外的目

2.录将被打包到 app（主包）中

3.app（主包）也可以有自己的 pages（即最外层的 pages 字段）

4.subPackage 的根目录不能是另外一个 subPackage 内的子目录

5.tabBar 页面必须在 app（主包）内

引用原则

packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
ackageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源
独立分包
独立分包是小程序的一种特殊类型的分包，可以独立于主包和其他分包独立运行。从独立
分包中页面进入小程序时，不需要下载主包，当小程序进入不同分包的时候，主包才会被下载。
可发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的
分包页面中启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上
提升分包页面的启动速度，一个小程序中可以有多个独立分包。

配置方法：

假设小程序的目录如下；

  ├── app.js
　　├── app.json
　　├── app.wxss
　　├── moduleA
　　│  └── pages
　　│  ├── rabbit
　　│  └── squirrel
　　├── moduleB
　　│  └── pages
　　│  ├── pear
　　│  └── pineapple
　　├── pages
　　│  ├── index
　　│  └── logs
　　└── utils

开发者可以通过在 app.json 的 subpackages 字段中的分包配置中自定义 independent

字段声明对应分包为独立分包

{
  　　 "pages": [
  　　 　　"pages/index",
  　　　　"pages/logs"
  　　　　],
  　　　"subpackages": [
  　　　　{
  　　　　"root": "moduleA",
  　　　　 "pages": [
  　　　　"pages/rabbit",
  　　　　 "pages/squirrel"
  　　　　]
  　　　　}, {
  　　　　"root": "moduleA",
  　　　　"pages": [
  　　　　"pages/pear",
  　　　　"pages/pineapple"
  　　　　],
  　　"independent": true
  　　}//欢迎加入全栈开发交流圈一起学习交流：582735936
  　　]//面向1-3年前端人员
　　} //帮助突破技术瓶颈，提升思维能力

限制：

独立分包属于分包的一种，普通分包的所有限制独立分包有效。独立分包中插件

自定义组件的处理方式同普通分包。

使用独立分包需要注意：

1.独立分包中不能依赖主包和其他分包中的内容，包括js 文件，template,

2.wxss,自定义组件，插件等，主包的app.wxss 对独立分包无效。应避免在

3.独立分包页面中使用 app.wxss 中的样式。

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

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

注意事项：

（1）关于 getApp()

与普通分包不同，独立分包运行时，App 并不一定被注册，因此，getApp()

也不一定获得App 对象，

当用户从独立分包页面启动小程序时，主包不存在，App 也不存在，此时调用

getApp 获取到的是undefined 。当用户进入普通分包或者主包时，主包才会

被下载， App 才会被注册。

当用户从普通分包或者主包的页面挑到独立分包的时候，主包已经存在，此时

调用getApp(),才能获得真正的App。

为了满足独立分包中的这一需求，基础库2.2.4 版本开始getApp 支持，

allowDefault 参数，在 App 未定义的时候返回一个默认实现。当主包

加载 App 被注册的时候，默认实现中被定义的属性会被合并覆盖到默认的App 中。

示例：

const app = getApp({allowDefault:true})
　　　　　　app.data = 456
　　　　　　app.global = {}
 　　　　.app.js 中
　　　　　　App({
　　　　　　　　data:12
　　　　　　　　other:'hello
　　　　　　})                                                                   
　console.log(getApp()) // {global: {} ,data: 456,other: 'hello'}

（2）关于 App 的生命周期

当从独立分包中启动小程序时，主包的中的onLanch 和首次 onShow 会从

独立分包页面首次进入主包或普通分包页面时调用。

分包下载：

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可需要的分包。

提升进入后续分包页面的速度，对于独立分包，可以预下载主包。

配置方法：

预下载分包行为在进入某个页面的时候触发，在通过app.json 增加 preloadRule

{
 "pages": ["pages/index"],
 "subpackages": [
 {
 "root": "important",
 "pages": ["index"],
 },
 {
 "root": "sub1",
 "pages": ["index"],
 },
 {
 "name": "hello",
 "root": "path/to",
 "pages": ["index"]
 },
 {
 "root": "sub3",
 "pages": ["index"]
 },
 {
 "root": "indep",
 "pages": ["index"],
 "independent": true
 }
 ],
 "preloadRule": {
 "pages/index": {
 "network": "all",
 "packages": ["important"]
 },
 "sub1/index": {
 "packages": ["hello", "sub3"]
 },
 "sub3/index": {
 "packages": ["path/to"]
 },
 "indep/index": {
 "packages": [""]
 }//欢迎加入全栈开发交流圈一起学习交流：582735936
 }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力

preloadRule 中，key 是页面路径， value 是进入此页面的预下载配置，每个配置都

有以下几项。

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

限制

同一个分包中的页面享有共同的预下载大小限额2M，会在工具打包时校验。

如：页面A 和页面B 都在同一个分包中，A 中预下载大小为0.5 M的分包，

B 中最大多只能预下载大小1.5 的分包。

结语

欢迎加入全栈开发交流抠抠裙一起学习交流：582735936

感谢您的观看，如有不足之处，欢迎批评指正。了解更多

小程序分包加载

猜你喜欢

热点阅读