微信小程序--分包加载流程

微信小程序--分包加载流程

1.为什么要分包

1. 小程序要求压缩包体积不能大于 2M，否则无法发布
2.  实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传
3.  分包后可解决 2M 限制，并且能分包加载内容，提高性能
4.  分包后单个包的体积不能大于 2M
5.  分包后所有包的体积不能大于 16M

2.分包形式

1.  常规分包
2.  独立分包
3.  分包预下载

3.常规分包

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

     2. 特点：

         a) 加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容

         b) 分包的页面可以访问主包的文件，数据，图片等资源

         c) 主包：

                i. 主包来源： 除了分包以外的内容都会被打包到主包中

                ii. 通常放置启动页/tabBar 页面

     3.配置方法

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

├── 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 中，每个分包的配置有以下几项：

  项目分包实例：

 4.独立分包

     1. 设置 independent 为 true

     2. 特点 :

         a) 独立分包可单独访问分包的内容，不需要下载主包

         b) 独立分包不能依赖主包或者其他包的内容

     3. 使用场景

         a) 通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包

         b) 如：临时加的广告页 || 活动页

     4.配置方法

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

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

开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

     5.限制 

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

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

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

 项目独立分包实例：

5.分包预下载

     1. 配置

         a) app.json 中设置 preloadRule 选项

         b) key(页面路径 ): {packages: [ 预下载的包名 || 预下载的包的根路径 ])}

     2. 特点 :

         a) 在加载当前包的时候可以设置预下载其他的包

         b) 缩短用户等待时间，提高用户体验

     3.配置方法

        预下载分包行为在进入某个页面时触发，通过在  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__"]
    }
  }
}

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

     4.限制

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

 如，页面 A 和 B 都在同一个分包中，A 中预下载总大小 0.5M 的分包，B中最多只能预下载总大小 1.5M 的分包。 

 项目实例：

预加载成功提示：

 6.分包效果演示