作者简介
携程前端框架团队,为携程集团各业务线在PC、H5、小程序等各阶段提供优秀的Web解决方案。产品涉及各类前端/Node端应用框架、研发工作台、前端中台化、静态资源发布系统等。当前主要专注方向包括:新一代研发模式探索,Rust构建工具链路升级、Serverless应用框架开发、在线文档系统开发、低代码平台搭建、适老化与无障碍探索等。
图1 携程小程序Size治理
从图中可以看出,Size治理包括Size监控机制和主包文件管理机制,这两个机制的实现离不开小程序管理平台的支持。小程序管理平台是携程内部用于管理各类小程序(微信、百度、支付宝等)的官方系统,是一个集小程序配置、发布、审批、数据统计于一体的系统。接下来我们将对其进行详细的介绍。
图2 Size分配
从图中可以看出,pages/train 的Size为:1888KB(永久Size) + 155KB(临时Size)。在到达约定日期之前,该Bundle的开发人员必须调整代码至永久Size大小(即1888KB),否则该Bundle提交新的代码时,将不能通过Size检查阶段。
2.2 Size检测
每当业务方提交代码至发布分支时,都会自动触发pipeline的构建,此时会对当前Bundle的实际Size进行检测,如果超过约定的Size值,会强制中断构建过程,并发送失败信息至相关发布群及开发人员,强制不让代码提交至发布分支,以此实现Size检测的能力,报错信息如图3所示:
图3 Size检测结果通知
通过Size分配和Size检查,强制业务方主动优化代码、自行下线流量较少的老业务代码,为新业务提供空间。同时,我们也提供了Size申请审批流程,业务方可通过申请临时Size获取额外的Size空间,如果临时Size达到了内部相关要求,也可以申请转换为永久Size。
2.3 Size申请审批
当Bundle必须通过申请临时Size才能上线新的需求时,Bundle Owner可以在小程序管理平台上创建临时Size申请单,由相关委员会审批后决定是否通过临时Size申请。如果以后想将临时Size转换为永久Size,需要理由足够充分,并且约定好业绩指标,才可以申请永久Size。申请平台如图4所示:
图4 Size申请审批
通过提高Size的申请成本,促使业务方更合理的利用有限的Size,防止无限制的代码堆砌、造成代码冗余。
2.4 Size提醒
为了督促各业务方能够按时归还临时Size,防止Size不足导致发布失败,我们设计了一套Size提醒机制,每天会给满足以下任意一条的Bundle Owner发送消息提醒:
提醒消息如图5-6所示:
图5 临时Size倒计时提醒
图6 Size超限提醒
通过消息提醒,促使Bundle Owner合理排期优化代码、缩减Size,起到了预警、监督、告示的作用,防止临时Size的回收致使新业务无法正常发布的情况。
2.5 Size数据统计
在小程序管理平台中,我们也提供了数据统计的功能,可以多维度的展示Size的趋势变化,比如BU维度的、Bundle维度、分包维度等;也可以查看小程序中各个BU的Size占比情况等,如图7-8所示。通过统计可以让我们直观的了解各个业务线的活跃程度以及Size的分配情况。
图7 BU总体Size趋势图
图8 Bundle Size趋势图
三、主包文件管理机制
每个小程序必定都有一个主包,所谓的主包,即放置默认启动页面或TabBar 页面,以及一些所有分包都需用到公共资源。小程序启动并进入非独立分包页面时,默认会下载主包,并且自动执行主包的脚本,主包的体积直接影响首屏渲染性能,关乎用户初次使用的体验,因此对主包文件的管理有着重要的意义。接下来,我们将从主包文件的管理和检查两方面进行详细介绍。
3.1 主包文件管理
小程序管理平台提供了对主包文件的可视化管理功能,主包文件的查看、增加、删除操作均可在管理平台上进行配置,如图9所示:
图9 主包文件管理
通过管理平台,我们可以快速获取主包中的文件内容以及文件的归属情况,配置后的数据将作为参照用于主包文件的检查。
3.2 主包文件检查
每当代码提交进行pipeline构建时,我们会通过微信的规则筛选出可能会打包到主包中的文件,将该列表与小程序管理平台上配置过的主包文件列表进行对比,如果存在未配置过的文件,会强制中断构建过程,并将构建结果发送至相关发布群即开发人员,以此实现主包文件的管理,报错信息如图10所示:
图10 主包文件检查
通过对主包文件进行清理,并对主包中的文件进行严格限制之后,主包Size下降了46.5%,如图11所示,目前已趋于稳定状态。主包管理机制防止业务线随意向主包中添加文件,做到了可感知、可控制,同时对提升首屏渲染性能有着重大意义。
图11 主包文件Size变化趋势图
综上所述,携程小程序Size治理方案主要包括Size管控机制和主包文件管理机制,实现了对Size的分配、检测、申请、提醒、统计能力,该方案在微信小程序中被充分地实践着,小程序的Size去向、占比都更加直观透明的展示出来,防止随意滥用。目前微信小程序的Size已趋于稳定状态,后续将逐步应用于其他类型的小程序中。
【推荐阅读】
“携程技术”公众号
分享,交流,成长