wechat_微信小程序分包的配置

小程序分包

什么是分包？

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

分包的好处？

  1、可以优化小程序首次启动的下载时间。（默认情况下不会进行分包，项目所有页面是打包到一起的，体积就比较大）。
  2、在多人团队共同开发时可以更好的解耦协作。（不同功能划分成不同的分包，提高开发效率）。

分包后的项目构成

  分包后，小程序项目由1个主包 + 多个分包构成。
  主包：一般只包含启动页面或他把bar页面、以及所有分包都会用到的一些公共的资源，例如：图片、js脚本、wxs脚本、wxss样式等。
  分包：只包含和当前分包有关的页面和私有的资源。

分包的加载规则

  在小程序启动时，默认会下载主包并启动主包内的页面，不会下载分包。tabBar相关的页面必须放到主包当中。
  当用户进入分包内某个页面时，客户端会把对应的分包下载下来，下载完成之后进行展示。非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载。

分包的体积限制

  目前，小程序分包的大小有以下两个限制。
  1、整个小程序所有分包大小不超过16M（主包 + 所有分包）。
  2、单个分包/主包大小不能超过2M。

分包的配置方法

  在app.json的subpackages节点中声明分包的结构，当分包的结构声明完成后，ctrl + s 保存，小程序会帮我们自动生成对应的目录文件。

{
    "pages": [ // 主包的所有页面
        "pages/index",
        "pages/logs"
    ],
    "subpackages": [
        {
            "root": "subPackageA", // 第一个分包的根目录
            "name": //分包的别名（非必要字段）
            "pages": [  //当前分包下，所有页面的相对存放路径
                "pages/cat",
                "pages/dog"
            ]
        },
        {
            ...第n个分包
        }
    ]
}

查看主包 / 分包体积的大小

  微信开发者工具➡➡右上角详情➡➡基本信息➡➡本地代码

打包原则

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

扩展

一、独立分包

什么是独立分包

  独立分包本质上也是分包，只不过比较特殊的是，不需要依赖于主包，可以独立于主包和其它分包而单独运行。简单讲就是可以在不下载主包的情况下，独立运行。

独立分包的应用场景

  当小程序从普通的分包页面启动时，不需要依赖于主包。
  优点：可以很大程度上提升分包页面的启动速度。
  注意：一个小程序中可以有多个独立分包。

独立分包的配置方法

{
    "pages": [ // 主包的所有页面
        "pages/index",
        "pages/logs"
    ],
    "subpackages": [
        {
            "root": "subPackageA", // 第一个分包的根目录
            "name": 分包的别名（看自己要不要name字段）
            "pages": [  //当前分包下，所有页面的相对存放路径
                "pages/cat",
                "pages/dog"
            ],
            "independent": true //通过此节点，声明当前"subPackageA", 分包为“独立分包”。
        },
        {
            ...第n个分包
        }
    ]
}

独立分包的引用原则

  独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源。例如：
  1、主包无法引用独立分包内的私有资源。
  2、独立分包之间，不能相互引用私有资源。
  3、独立分包和普通分包之间，不能相互引用私有资源。
  4、特别注意：独立分包中不能引用主包内的公共资源。

二、分包预下载

什么是分包预下载

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

如何配置分包的预下载

{
    "pages": [
        "pages/home/home",
        "pages/message/message",
        "pages/contact/contact" 
    ],
    "preloadRule": { // 分包预下载的规则
        "pages/contact/contact": { // 触发分包预下载的页面路径
            //packages表示进入页面后，预下载哪些分包
            //可以通过root 或 name 指定预下载哪些分包
            "packages": ["p1"],
            //network表示在指定的网络模式下进行预下载
            可选值为： all(不限网络) 和 wifi(仅在wifi模式下进行预下载)
            默认值为：wifi
            "network": "all" //all表示无论什么网络模式，都会进行预下载
        }
    }
}

分包预下载的限制

  同一分包中的页面享有共同的预下载大小限制2M。(简单讲就是同一个分包里头所有页面加起来大小不能大于2M)。