微信小程序主包体积超限的解决方案
随着微信小程序的不断迭代，很多者都会遇到一个棘手的问题——主包体积超出限制。本文将针对主包体积超限的情况，尤其是tabbar页面在主包内的情况，提供一些实用的优化方案。
微信小程序分包限制
微信小程序的分包大小有以下限制：
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
如果你的小程序主包体积已经接近2M，那么接下来的内容会对你有所帮助。
项目结构简介
我们的项目结构如下：
- 1个主包 + 15个分包
- 经过压缩后，代码总体积为5410KB，主包体积为2025KB，处于即将超限的状态。
主包体积过大的原因
主包体积过大的主要原因是我们采用了微信默认的tabbar方案。虽然使用起来很方便，但tabbar页面必须在主包中实现。而我们的业务需求导致很多功能都集中在tabbar页面，直接导致了主包体积的膨胀。
主包功能
主包的功能主要分为以下几类：
- Taro产生的编译文件：这部分无法缩减，不做讨论。
- 公共模块的实现：
- 公共组件
- 工具函数
- 其他公共数据
- tabbar页面的实现
- 小程序入口：负责处理数据初始化、扫码跳转、公众跳转等。
优化方案：自定义tabbar页面
既然tabbar页面是主包体积过大的主要原因，那么优化方案自然要围绕它展开。以下是几种可能的解决方案：
1. 为什么不将tabbar页面放在分包中？
微信小程序规定，tabbar页面必须在主包中实现，因此这个方案不可行。
2. 为什么不采用自定义tabbar？
微信小程序提供了自定义tabbar的实现，但由于分包限制，自定义tabbar仍然需要在主包中实现，因此这个方案也无法解决主包体积过大的问题。
3. 为什么不将tabbar页面中使用的组件放在分包中？
同样由于分包限制，主包无法引用分包中的组件，因此这个方案也不可行。
4. “自定义”tabbar页面的实现
这里的“自定义”并非微信小程序提供的自定义方案，而是将tabbar页面的业务部分全部抽离到一个新的分包中，主包中只保留公共模块和程序入口。这样，tabbar页面的功能就类似于一个菜单的实现，只不过这个菜单是我们自定义的。
实现流程
我们项目的实现流程如下：
- 在分包中新增一个关于该业务的tabbar页面。
- 在该页面中以组件的形式引用之前的四个“tabbar页面” + 自定义的Tabbar组件。
- 通过selectTabbar值将四个组件关联起来，实现与原生体验无差别的“自定义tabbar页面”。
代码实现
为了便于管理，我们制定了以下规范：
- 在tabbar页面中切换tabbar的选中状态，直接修改当前Tabbar组件的state值。
- 其他页面要修改tabbar选中状态时，通过路由传参的方式完成。
跳转方式的修改
之前使用的是小程序自带的tabbar实现，跳转tabbar页面时使用Taro.switchTab()方法。在新的实现方式中，我们改用Taro.reLaunch()方法，以防止用户使用系统返回键导致的异常问题。
测试与验证
为了防止文件位置改变导致的引用错误，建议在过程中整理修改范围，并提供给测试团队进行验证。
优化效果
通过提取tabbar的实现，主包体积直接缩减了1/4左右，主要缩减的是主包的逻辑代码。这样，未来主包超出限制的可能性也会大大降低，极大提升了容错率。
总结
通过自定义tabbar页面的实现，我们成功缩减了主包体积，解决了主包体积超限的问题。如果你的小程序也面临类似的问题，不妨试试这个方案。
