社区编辑申请
注册/登录
携程微信小程序如何进行Size治理
移动开发 移动应用
携程小程序涉及30+条业务线,上百个开发人员,目前包体积已经向着微信限制的20M迈进,包体积过大必将导致新增业务受限、启动慢等问题,这些都给用户带来了不好的使用体验,因此对Size的治理势在必行。

​作者 | 携程前端框架团队,为携程集团各业务线在PC、H5、小程序等各阶段提供优秀的Web解决方案。产品涉及各类前端/Node端应用框架、研发工作台、前端中台化、静态资源发布系统等。当前主要专注方向包括:新一代研发模式探索,Rust构建工具链路升级、Serverless应用框架开发、在线文档系统开发、低代码平台搭建、适老化与无障碍探索等。

一、背景

众所周知,无论是微信小程序、支付宝小程序或者其他类型的小程序,代码包都是有大小限制的。目前微信官方规定,整个小程序不超过20M,单个分包或主包大小不超过2M。之所以这样限制,是对小程序启动速度的考虑,微信希望用户在使用任何一款小程序时,都能获得一种”秒开“体验,这也正是小程序的优势所在,但同时也对开发人员提出了更高的要求。

携程小程序涉及30+条业务线,上百个开发人员,目前包体积已经向着微信限制的20M迈进,包体积过大必将导致新增业务受限、启动慢等问题,这些都给用户带来了不好的使用体验,因此对Size的治理势在必行。

为了能够合理有效的利用有限的Size,我们设计了一套自己独有的Size治理方案,如图1所示:

图1 携程小程序Size治理

从图中可以看出,Size治理包括Size监控机制和主包文件管理机制,这两个机制的实现离不开小程序管理平台的支持。小程序管理平台是携程内部用于管理各类小程序(微信、百度、支付宝等)的官方系统,是一个集小程序配置、发布、审批、数据统计于一体的系统。接下来我们将对其进行详细的介绍。

二、Size监控机制

2.1 Size分配

在《携程微信小程序如何协同开发》一文中我们提到过,携程将整个小程序划分数十条业务线(即Bundle),每个Bundle可以拥有多个分包。我们为每个Bundle设置一个约定好的阈值,该值包括两部分:永久Size + 临时Size。顾名思义,永久Size是Bundle的固有Size,临时Size是指到了约定日期将自动回收的Size,这些信息都在小程序管理平台系统中进行配置,如图2所示:

图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发送消息提醒:

  • 含有临时Size的Bundle;
  • 临时Size到期的Bundle;
  • Size超限的Bundle。 

提醒消息如图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已趋于稳定状态,后续将逐步应用于其他类型的小程序中。

责任编辑:未丽燕 来源: 携程技术
相关推荐

2022-03-01 11:33:36

企业微信Zabbix监控软件

2022-06-08 21:08:22

微信朋友圈

2022-06-21 19:51:10

数字藏品

2022-02-16 09:22:25

Wine 7.2Linux微信

2022-06-10 06:55:21

JustAuthSpring

2015-08-24 15:08:50

OpenShiftNode.js微信开发

2021-03-03 14:23:06

微信小程序互联网

2016-09-27 15:40:58

微信程序前端

2021-08-01 22:41:07

2022-05-31 06:01:00

WDM/OTN网络数据

2016-09-28 18:10:59

微信程序MINA

2021-03-10 09:44:20

微信小程序APP

2016-11-22 11:23:52

微信小程序腾讯微信

2018-04-27 11:50:15

Python微信好友微信

2016-09-27 20:36:23

微信HttpWeb

2016-11-04 10:09:52

微信程序创业者

2017-01-09 10:01:49

微信小程序

2016-10-20 21:02:12

2022-07-01 06:44:42

微信应用伪装应用转生

2022-01-06 18:00:54

同话题下的热门内容

就因为QQ登录二维码,全网发生了大规模的社死京东618广告精排百分位AUC提升技术方案QQ又出新BUG,你的密码变成“123456789”了?B端产品如何做好移动化设计?我总结了这篇实战经验!实测避坑!十个B端组件红黑榜揭秘微信这个限制,终于被两个软件打破了!百度直播iOS SDK平台化输出改造

编辑推荐

Safari不是唯一选择:8款优秀iPhone Web浏览器应用!从安卓智能手机控制PC的五款最佳应用软件谁说苹果手机不能截长屏?教你3种方法,别再说不知道了推荐两款iOS端磁力下载工具后悔药来了!iOS 15刷机降级iOS 14.6详细图文教程
我收藏的内容
点赞
收藏

51CTO技术栈公众号