微信小程序分包

2020-03-10 周二 阴

简述什么是分包、为什么要分包以及分包的优缺点，罗列分包相关规则和大坑

背景

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地的，这种策略可以缓解页面跳转时白屏的问题。同时微信还对小程序代码包大小设置了 2M （最初只有 1M）的上限来确保小程序能有还不错的启动速度。

但是在发展过程中，开发者（的老板）普遍觉得 2MB 的大小限制了小程序功能的扩展，不利于业务开展。为了解决这一问题，微信推出了分包加载这一方案。

什么是分包加载

引用官方文档的解释：

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

说得很明白，以前代码是打成一个包下载下来的，分包加载就是用到哪个包才下载哪个（先不提主包和预加载等等机制）。和 webpack 里的代码分割是一种操作。

为什么分包

在我的项目中分包的动机可能有以下几点：
· 功能还没做完代码包就已经 2M 了，不得不分
· 功能已经做完，空间还有富余但是产品经理意犹未尽，未雨绸缪
· 看原型就知道 8M 空间也挡不住的...

总之，我的观点是除非一开始就能确定代码包肯定不会超限，否则越早规划分包方案越好，拖得越久需要处理的问题越多。

分包的优缺点

优点：
最大的优点当然是突破 2M 限制了，可以大大扩展小程序承载的业务。此外分包规划得当，精简主包，能够极大优化冷启动速度，重新带来丝滑体验。
》官方：在多团队共同开发时可以更好的解耦协作。（再也不用合代码了）

缺点：
如果你是在后期才开始策划分包，ennn 你要处理以下麻烦事：

• 分包后资源url变动，需要找出所有引用资源的地方并更新
• 分包后页面url变动，需要找出所有导航并更新
• 已经分享出去的二维码、小程序码、链接都需要做兼容（因为页面url可能变了）或者放弃
• 需要耗费一定精力规划分包方案

相关概念

• 主包/分包

  主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

• 独立分包

  独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。
  开发者可以按需将某些具有一定功能独立性的页面配置到独立分包中。当小程序从普通的分包页面启动时，需要首先下载主包；而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。
  一个小程序中可以有多个独立分包。

• 预下载

  开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。

分包规则

分包也是有大小限制的：（以官方文档为准）

• 整个小程序所有分包大小不超过 12M
• 单个分包/主包大小不能超过 2M

重要规则：

• 使用分包的小程序必定有一个主包，tabBar 页面必须在主包内
• 主包不可以引用子包内容
• 子包只可以引用自己包内和主包内的内容
• 子包内不能嵌套子包
• 独立分包不能引用其他包的内容，且主包中 app.wxss 对独立分包无效
• 独立分包中暂时不支持使用插件

上述 “内容” 指 js文件、template、wxss、自定义组件、插件等

注意事项

• root字段（子包根目录）配置路径外的目录将被打包到主包中
• 跳转外部包页面、引用主包资源最好使用绝对路径（/ 开头），使用相对路径时要注意，当前路径是js文件所在路径。
• 独立分包：官方文档
• 预下载也需要注意 2M 限额

如何配置分包

demo：https://developers.weixin.qq.com/s/ta9sVKme7wf1

➡️https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

复制模板

app.json

{
...
"subpackages": [
    {
      "root": "根目录", 
      "name": "预加载时可以使用的别名",
      "pages": [
        "相对于root的页面路径"
      ],
      "independent": false
    }
],
"preloadRule": {
    "页面路径": {
      "packages": ["分包root或name， 表示主包"],
      "network": "all | wifi"
    }
}
...
}

---

END