微信小程序分包

2020-03-10 周二阴

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

背景

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

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

什么是分包加载

引用官方文档的解释：

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

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

为什么分包

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

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

分包的优缺点

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

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

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

分包规则

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

整个小程序所有分包大小不超过 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，__APP__ 表示主包"],
      "network": "all | wifi"
    }
}
...
}

END

微信小程序分包