小程序分包-蒲公英云

转自//www.jianshu.com/p/e51316e15a6a
1.分包
为什么使用分包
小程序第一版推出小程序代码包不能超过1MB 大小，所以，小程序可以秒开，但是随着业务的发展，又推出整个小程序所有分包大小不超过 8M，而8M不能秒开，于是就推出分包加载。
对于小程序而言

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

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

分包支持版本

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

对于小程序游戏而言
目前小游戏分包大小有以下限制：

整个小游戏所有分包大小不超过 8M
单个分包/主包大小不能超过 4M

分包支持版本

微信 6.6.7 客户端，2.1.0 及以上基础库开始支持，请更新至最新客户端版本，开发者工具请使用 1.02.1806120 及以上版本

分包步骤
小程序的分包步骤
step1：
添加项目目录

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

step2：
在app.json中的目录结构中添加分包目录(“subpackages”或”subPackages”都可以)

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

step3：
分包配置
subpackages里面的配置项包括

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

打包规则

1.声明 subpackages 后，将按 subpackages 配置路径进行打包，2.subpackages 配置路径将作为分包打包，其他都被打包到 app（主包）中
3.app（主包）也可以有自己的 pages（即最外层的 pages 字段）
4.subpackage 的根目录不能是另外一个 subpackage 内的子目录
5.tabBar 页面必须在 app（主包）内
6.每个分包都可以使用自己分包内的资源以及引用require app里面的资源，但是分包与分包之间，都是不可通信的，分包与主包下的pages里面的内容也是不可通信的(这一点有待考证)

分包预下载

基础库 2.3.0 开始支持，低版本需做兼容处理。开发者工具请使用 1.02.1808300 及以上版本，可点此下载。
目前只支持通过配置方式使用，暂不支持通过调用API完成。

通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

配置方法
在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": ["__APP__"]
    }
  }
}

以上配置

key 是页面路径，value 是进入此页面的预下载配置，

packages的 value是StringArray 类型，表示进入页面后预下载分包的 root 或 name。APP 表示主包。

network 是string类型默认为 ‘wifi’ ，标识在指定网络下预下载，
可选值为
all: 不限网络
wifi: 仅wifi下预下载

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

独立分包

小程序游戏不支持独立分包。

微信客户端 6.7.2，基础库 2.3.0 及以上版本开始支持。开发者工具请使用 1.02.1808300 及以上版本，可点此下载。

1.从独立分包中页面进入小程序时，不需要下载主包。
2.从普通的分包页面进入小程序时，首先下载主包；

优势：提升分包页面的启动速度。

配置方法
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
    }
  ]
}

普通分包的所有限制都对独立分包有效。独立分包隶属于普通分包

注意

独立分包中不能依赖主包和其他分包中的内容,如：js文件、template、wxss、自定义组件、插件等,
避免在独立分包页面中使用 app.wxss 中的样式；

App 只能在主包内定义
独立分包中暂时不支持使用插件。

1.独立分包运行时，App 并不一定被注册，
即 getApp() 可能死两种情况，a: 可以获得 App 对象,b. undefined

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

独立分包中

const app = getApp({allowDefault: true}) // {}
app.data = 456
app.global = {}

app.js 中

App({
  data: 123,
  other: 'hello'
});
console.log(getApp()) // {global: {}, data: 456, other: 'hello'}

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

注意
1.分享路径必须去除前面的斜线，否则会出现报错某某页面不应该出现在分包页面中
2.无法在首页或tabbar页打开分包中的页面，必须先链接到非首页或tabbar页面，再进行跳转到分包中的页面。
3.每个页面的js文件必须初始化page({})。
4.tabBar 页面必须在 app（主包）内
5.一些公共用到的自定义组件，需要放在主包内。