小程序分包

比眉伴天荒 2022-04-24 00:54 254阅读 0赞

转自:[https://www.jianshu.com/p/e51316e15a6a][https_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.一些公共用到的自定义组件，需要放在主包内。

[https_www.jianshu.com_p_e51316e15a6a]: https://www.jianshu.com/p/e51316e15a6a