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

在小程序的开发中，使用分包是非常有必要的，这是因为，小程序的包大小最多不能超过2M，这对对于开发来说，完全不够，这个时候就需要使用分包了，比如需要开发多个角色，就可以使用分包来减轻主包的压力。

主包

主包就是放置默认启动页面以及TabBar页面和一些所有分包都需用到公共资源及js文件
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
整个小程序所有分包大小不超过 20M，单个分包/主包大小不能超过 2M

分包

什么是分包

分包指的是把一个小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户根据角色的不同，按需加载分包。

分包的结构

QQ图片20220426161628.png

分包的优点

优化首次启动的加载下载时间
单包的内存只有2M，对于开发大型程序一个包不能存放
多人开发，更好的分包开发，利于协作

按模块分包

  "subPackages": [
    {
      "root": "pages/user",
      "pages": [
        {
          "path": "information"
        }
      ]
    }
  ],

分包预加载

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

"preloadRule": {
    "pages/detail/index": {
        "network": "wifi",
        "packages": ["pagesA", "pagesB"]
    }
}

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置, packages 是进入页面后预下载分包的。network 在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）

分包的加载规则

tabBar 页面需要放在主包中，假设我们如两个 tabBar，配置如下：

"tabBar": {
    "color": "#BBBBBD",
    "selectedColor": "#1C1C1C",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/first/index",
        "iconPath": "static/tabbar_icon_channel.png",
        "selectedIconPath": "static/tabbar_icon_channel_active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/index",
        "iconPath": "static/tabbar_icon_member.png",
        "selectedIconPath": "static/tabbar_icon_member_active.png",
        "text": "我的"
      }
    ]
  }

分包优化

在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化。

分包优化的逻辑

静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

小程序的分包

主包

分包