Taro小程序分包实践

5,273 阅读4分钟

来源

公司写的内部分享

本篇文章也是我写的,在21年的元旦中完成过一次Taro小程序分包,也和公司交流过同意将文档分享

一、背景

此前,只有C端项目组增长线+APP招生线 业务用途才使用到小程序项目,并且增长线在元旦期间主导进行过小程序分包优化。

后续布局:各业务团队都涉及到了到了taro进行开发小程序,小程序分包是项目一开始就应该制定规范标准和实施的

优化后,分包效果甚好,该文档主要介绍分包的应用场景和使用方法

二、小程序分包是什么

官网介绍很详细 普通分包官方文档

三、为什么我们需要分包

1. 多种业务集成在一个业务模块内。

  1. 多个业务有不同的场景的话,不同的业务场景对入口文件可能会有不同的逻辑要求(如:微信直播间强烈依赖scene和正常购课页不依赖scene),会造成入口文件难理解和冗余。

2. 多个业务团队共同开发维护一个项目。

每个人的风格不尽相同,分包可以避免与其他业务交叉,各个团队只需要维护自己的分包内容即可

整包恐体积过大影响上传****

微信官方基础库版本1.7.3之前是每个包(分包、主包)限制大小1M,超过该体积无法上传,而后改为2M

如果APP中任一个包过大都会导致发布失败:

但是通过微信CI上传可以绕过这个问题

2. 插件体积过大

插件体积大并且放在主包会,污染主包,会造成的主包庞大。 如果插件的使用是APP非必要访问路径,推荐放入分包。

3. 为了进一步优化

预加载

独立分包

四、分包思想

C端分包采用的思想是:只提供给这个用户访问到的路径作为一个包。

用户在进入第一个页面的时候,就已经知道这个用户的可访问路径。这时候可以把用户可能访问的路径完整链路的放入一个包内。

如购课页用户只会访问到购课页相关的订单页、选课页、地址页、售后页,并不会访问到邀请有奖和其他活动页面,所以这就可以把购课页相关的页面放入一个包。

如果订单页多业务通用,则将订单页单独抽离出一个包。

五、小程序分包配置

我们公司研发团队中,B端/C端也都是采用Taro框架进行多端开发(H5/小程序/应用商店微应用)。

Taro框架架构普通分包

非常简单,由于Taro是通过webpack方式进行构建打包的,所以无需考虑过度引用分包的问题。

六、小程序分包影响面和解决方案

  1. 页面放入分包后,会对原有的页面路径改变,造成用户访问原来的页面404
    1. 兜底方案1:保留原有的页面路径在主包中,只保留跳转逻辑代码,用户进入后可直接跳入到相应分包页面。
    2. 兜底方案2:在入口文件app.ts didShow(小程序的onLaunch)加入路径页面判断跳转,跳转进入分包页面。
  2. 基于小程序更新机制,发布新版本小程序之后,无法立刻影响所有现网用户
    1. 最差情况下是24小时完成全部版本下发更新(官方)
    2. 在小程序入口增加UpdateManager管理更新

七、小程序分包低版本兼容性

对于不兼容小程序分包的版本会将分包自动转为整包,不影响用户正常访问

*整包:未进行分包处理的代码。

八、如何验收成果

  1. 构建代码
  2. 上传代码到平台
  3. 上传后,微信开发者工具-详情-基本信息-本次上传即可查看

关于我近期规划和实施在做的小程序优化:[已完成]grow_mp项目小程序端优化规划#statistic