uni-app开发小程序如何进行分包优化、分包的预下载（详尽版）一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

一、为什么需要进行分包

在我们的小程序开发过程中，随着版本的不断迭代，体积会变得越来越大，如果代码包过大，会影响小程序首次启动的时间，甚至可能出现代码无法上传，无法进行打包的情况，分包的提出很好的帮助我们解决这些问题，下面我们一起来认识下小程序的分包。

二、分包的基本概念

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

三、分包有什么好处

对于开发者而言，能使小程序有更大的代码体积，承载更多的功能与服务；
对于用户而言，可以更快打开小程序，同时在不影响启动速度的前提下使用更多的功能与服务。

四、分包前后小程序项目的基本构成

分包前，小程序项目中的所有页面和资源都被打包到一起，导致项目的体积过大，影响首次启动的时间。

分包后，小程序项目由1个主包+多个分包构成。

主包：放置默认启动页面/TabBar页面，以及一些所有分包都需用到公共资源/JS脚本；
分包：只放置和当前分包有关的页面和私有资源。

注意：主包中的公共资源可以供所有分包进行使用，而分包中的私有资源只允许当前的分包进行使用。

五、分包的体积大小限制

整个小程序所有分包的体积大小不能超过20M（主包 + 所有分包）；
单个分包/主包的体积大小不能超过2M。

六、分包的加载规则

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

七、uni-app中配置分包

1、项目的目录结构

2、使用`optimization`属性开启分包优化

属性	类型	说明
subPackages	Boolean	是否开启分包优化

在manifest.json文件中加入"optimization": {"subPackages": true}

3、在`pages.json`文件的`subPackages`节点中声明项目分包结构

subPackages节点接收一个数组，数组中的每一项都是应用的子包，其属性值如下：

属性	类型	是否必填	描述
root	String	是	子包的根目录
pages	Array	是	子包由哪些页面组成

注意：subPackages节点中的pages的路径是root下的相对路径，不是全路径。

// pages.json
{
  // 主包：只存放Tabbar页面以及公共页
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    },
    {
      "path": "pages/course/index",
      "style": {}
    },
    {
      "path": "pages/my/index",
      "style": {}
    }
  ],
  
  // 分包
  "subPackages": [
    {
      "root": "packageA", // 分包的根目录
      "pages": [{         // 该分包下的所有页面
        "path": "detail/index"
      }]
    },
    {
      "root": "packageB",
      "pages": [{
        "path": "address/index"
      }]
    },
    {
      "root": "packageC",
      "pages": [{
        "path": "order/index"
      }]
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "pms",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

4、分包的打包规则

使用subPackages属性对分包的路径进行声明，subPackages之外的目录将被打包到主包中；
tabBar里面配置的页面必需放到主包内；
不通的分包之间的私有资源不能相互引用，但都可以引用主包中的公共资源。

5、分包的引用原则

主包无法引用分包内的私有资源；
分包之间不能相互引用私有资源；
分包可以引用主包内的公共资源。

6、如何查看代码包的大小

点击微信开发者工具右上角详情按钮，在基本信息下方的本地代码可以看到主包以及各个分包的体积大小。

八、分包预下载

1、什么是分包预下载

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

2、如何配置分包的预下载

在pages.json文件的preloadRule节点中配置分包预下载规则，预下载的行为，会在进入指定的页面时触发。

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

字段	类型	必填	默认值	说明
packages	StringArray	是	无	进入页面后预下载分包的 `root` 或 `name`。`__APP__` 表示下载所有包。
network	String	否	wifi	在指定网络下预下载，可选值为：all（不限网络）、wifi（仅 wifi 模式下进行预下载）
示例代码如下：

{
  "preloadRule": { // 分包预下载规则配置
    "packageA/detail/index": { // 触发分包预下载的页面路径
      // network 表示在指定的网络模式下进行预下载
      // 可选值为：all（不限网络） 和 wifi（仅 wifi 模式下进行预下载）
      // 默认值为：wifi
      "network": "all",
      // packages 表示进入页面后预下载哪些分包
      // 可以通过 root 或 name 指定预下载哪些分包
      // 如果是 __APP__ 表示下载所有包
      "packages": ["packageA"]
    }
  },
}

3、如何查看分包预下载是否成功

进入触发预加载页面时查看Console日志信息，如果打印preloadSubpackages: success信息，表示分包预下载成功。

结语：如有不足之处，欢迎在评论区指教，不胜感激！

uni-app开发小程序如何进行分包优化、分包的预下载（详尽版）