分包

分包介绍

1、概念
分包是把一个完整的小程序项目，按需分为不同的子包，在构建打包成不同的分包，用户在使用时按需进行加载。可以优化小程序首次启动的下载时间，在多团队开发时可以更好的解耦协作。
分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。
分包后，小程序由一个主包+多个分包组成。珠宝一般只包含项目的启动页面或TabBar页面，以及所有分包都需要用到的一些公共资源。分包只包含和当前分包有关的页面和私有资源。
2、加载规则
小程序启动时，默认下载主包，并启动主包内页面，tabBar页面需要放到主包。
当用户进入分包内某个页面时，客户端会把对应分包下载下来，完成后再进行展示。
3、体积限制
所有的分包大小不能超过20M
单个分包/主包大小不能超过2M

使用分包

1、小程序目录结构：

2、在app.json中window平级下使用subpackages节点，具体配置如下
app.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"subPackages": [
  {
    "root": "packageA",//必须有，指定分包根目录
    "pages": [
      "pages/cat/cat",
      "pages/dag/dog"
    ]
  },{
    "root": "packageB",
    "pages": [
      "pages/apple/apple",
      "pages/banana/banana"
    ]
  }
]

打包原则

1、小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中。
2、主包也可以有自己的pages（即最外层的pages字段）。
3、tabBar页面必须在主包内。
4、分包之间不能互相嵌套。

引用原则

1、主包无法引用分包内的私有资源。
2、分包之间不能相互引用石油资源。
3、分包可以引用主包内的公共资源。

独立分包

独立分包的概念

1、概述
独立分包本质上也是分包，不过独立分包可以独立于主包和其他分包而单独运行（比如美团和美团外卖）
2、和普通分包的区别
普通分包依赖于主包才能运行，独立分包可以独立运行。

使用独立分包

将上面subpackages节点中需要设置为独立分包的分包，添加independent:true节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"subPackages": [
    {
      "root": "package1",
      "pages": [
        "pages/cat/cat",
        "pages/dag/dog"
      ],
      "independent": true,
      "name": "pkg1"
    },{
      "root": "package2",
      "pages": [
        "pages/apple/apple",
        "pages/banana/banana"
      ],
      "name": "pkg2"
    }
  ]

引用原则

独立分包和普通分包以及主包之间是相互隔绝的，不能互相引用彼此的资源。
注意：独立分包不能引用主包内的公共资源！

分包预下载

概念

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

使用分包预下载

在app.json中，使用preloadRule节点定义分包的预下载规则：

1
2
3
4
5
6
"preloadRule": {
   "pages/home/home":{//键值为某页面，当进入该页面触发预下载
     "network":"all",//可以为all或wifi，表示在wifi模式下启动预下载
     "packages": ["pkg1","pkg2"]//需下载的包，可以通过对应分包的name或root来配置
   }
 }

分包预下载限制

分包预下载最大为2M，所有预下载的分包总和应小于2M。