1.微信小程序--分包

????????什么是分包?

????????分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

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

? ? ? ? 分包后的项目构成

? ? ? ? 分包后小程序由一个主包与多个分包组成，

主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
分包：只包含和当前分包有关的页面和私有资源

2.为什么需要进行分包

????????微信小程序限制了代码包不能超过 2MB，限制大小是对小程序启动速度的考虑，但是2MB 大小严重限制了小程序功能的扩展，业务需求可能需要更大的体积，综合考虑微信推出了“分包加载方案”

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 20M（微信小程序版本不同，大小不同）
单个分包/主包大小不能超过 2M
对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作

3.如何进行分包操作

配置

需要在主包的app.json中进行配置（微信小程序官方文档的示例如下）

分包后的文件列表信息如下：

?app.json中文件的配置

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

注释? 属性

属性名                 类型                    解释
"subpackages"         array                  字段声明项目分包结构
    
"root"                string                 分包的根路径

"name"                string                 分包别名，分包预加载的时候使用

"page"                StringArray            分包页面路径，（相对于分包根节点的路径）

"independent"         Boolean                分包是否是独立分包

打包原则

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

引用原则

packageA?无法 require?packageB?JS 文件，但可以 require 主包、packageA?内的 JS 文件；使用分包异步化时不受此条限制
packageA?无法 import?packageB?的 template，但可以 require 主包、packageA?内的 template
packageA?无法使用?packageB?的资源，但可以使用主包、packageA?内的资源

低版本兼容

????????由微信后台编译来处理旧版本客户端的兼容，后台会编译两份代码包，一份是分包后代码，另外一份是整包的兼容代码。新客户端用分包，老客户端还是用的整包，完整包会把各个?subpackage?里面的路径放到 pages 中。

分包预加载

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

配置方法

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

{
  "pages":[
    "pages/logs/logs",
    "pages/index/index"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "name": "pack1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },{
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/banana/banana",
        "pages/apple/apple"
      ],
      "independent": true
    }
  ],
 "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["pack1"]
     //"packages": ["packageA"]  也可以写这个
    },
//B 是独立分包   需要单独作为根节点
    "packageB/index"：{
        "packages":["_APP_"]
    }
    
}

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

属性名        类型       默认值      说明

packages    stringarray   无   进入小程序页面后预加载的分包的root或name。_APP_代表主包
        
network      string     wifi    在指定网络下预加载（all 不限网络  、wifi仅wifi下预加载）