微信小程序分包加载
2021-02-07 13:50:50

刚刚完成我微信小程序的所有案例,我的微信小程序共有4个Tabbar选项,请看介绍:
1.「AI应用」页:包含三个功能,基于CNNMNIST手写数字识别、基于PoseNet的人体姿态检测以及基于Coco SSD的对象检测;
2.「生活服务」页:包含两个功能,基于国内城市名称的天气预报查询以及基于单号的快递信息查询;
3.「发现」页:包含两个功能,OCR技术识别身份证、银行卡、驾驶证等以及语音识别;
4.「关于作者」页:主要内容为我的个人介绍;

当我准备在本地预览时,开发者工具显示如下提示信息:

图1 - 微信小程序提示信息

很明显,我的小程序超过了微信官方限定的大小,在本文中,我将提供两种方法去解决这个问题,第一种方法采用微信官方提供的「分包加载」;第二种方法相比起来简单粗暴,即直接删掉相关包,请看文章。

参考资料

  1. 微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

1. 分包加载

「分包加载」需要微信客户端版本大于6.6.0,基础库版本大于1.7.3,开发者工具版本大于1.01.1712150

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

在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。

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

目前小程序分包大小有以下限制:

  1. 整个小程序所有分包大小不超过 20M
  2. 单个分包/主包大小不能超过 2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

具体使用方法请参考:

  1. 使用分包:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
  2. 独立分包:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html
  3. 分包预下载:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html

2. 删掉相关包

相比第一种方法,第二种方法就比较简单粗暴了,我们需要对我们整体项目的代码做一次清理,清理掉无关代码,必要时可以删除一些不必要的功能,也可以将本地的部分图片、音视频资源等通过云存储存放起来,这些措施都能帮助我们减小微信小程序项目的大小,经过处理之后,我的微信小程序项目大小减小到了2049KB

图2 - 微信小程序预览信息提示

3. 文章最后

以上就是本文的所有内容,小伙伴们学会了嘛?快去实践一下吧!更多详情请关注我的更多开源作品:
1. 微信公众号(hahaCoder)

图3 - 微信公众号

2. 微信小程序(hahaAI)

图4 - 微信小程序

3. Github
链接地址:https://github.com/TURBO1002