美团扫码付小程序的优化实践

短短几年的时间，微信小程序已经从一颗小小的萌芽成长为参天大树，形成了较大规模的开发者生态系统，尤其是在支付、线下垂直领域潜力巨大。

作为领先的生活服务平台，美团的技术团队在小程序领域也进行了很多的探索和实践。像mpvue就是一款使用Vue.js开发微信小程序的前端框架，而且已经在美团点评多个实际业务项目中得到了验证，具体介绍大家可以阅读《用Vue.js开发微信小程序：开源框架mpvue解析》一文。目前，mpvue已经开源

本文将介绍扫码付小程序的实践，根据美团前端工程师陈瑶在美团第31期技术沙龙（点击可以查看这次沙龙四场演讲的Slides和视频）的演讲《金融扫码付H5迁移小程序拓荒之旅》整理而成。

什么是扫码付小程序？

美团扫码付是一款面向C端消费者推出的线下收单业务，相信大家已经在线下很多餐馆和其他生活服务商家体验过了。这项业务主要就是通过小程序提供服务的，而在实际场景中，用户先使用微信“扫一扫”功能，扫描商家二维码，系统会自动调用扫码付小程序，进入支付页面，很后输入金额完成商品的支付。

目标及数据分析

支付服务很核心的指标，显然就是用户支付成功的占比，我们称之为支付转化率。对扫码付业务而言，支付转化率的百分比越高，扫码付业务的营业额也就越高，其带来的收益是正相关的。因此提升扫码付小程序的支付转化率，就成为我们技术团队的重要工作。经过数据分析，我们发现转化率流失主要存在于以下两个环节：

扫码到进入小程序环节（外部环节）

进入小程序到支付环节（内部环节）

从扫码到进入小程序环节，微信会完成小程序基本信息获取、资源预备（代码下载或更新）等预备事项。在预备事项中，假如预备失败或等待时间过长，就会导致用户离开，这部分由微信控制的环节，我们称之为外部环节。

在进入小程序到支付环节，页面会进行渲染、数据请求等，假如渲染时间长、数据请求时间长也简单导致用户离开，同样，假如数据请求失败也会造成用户使用过程的终止，这部分由我们美团扫码付技术团队控制的环节，称之为内部环节。

如何提升外部环节转化率？

对于小程序开发者而言，扫码到小程序调起这个环节是黑盒的，我们无法得知其中的细节。而我们在扫码付小程序中尝试和微信的同学做了一次梳理，发现扫码付小程序在外部环节的丢失率较高，查询数据后，我们发现其中大部分用户手动点击了右上角的退出。

从业务视角出发，用户使用扫码付小程序，可认为他们有强需求进行支付，而造成用户手动点击退出的部分原因可能是等待时间过长。而在这个环节对时间造成影响更多的是资源预备，即小程序代码下载或者更新的行为。根据经验，影响下载和更新时间可能的因素包括两个方面：一个是网络，另一个是代码包。

因为用户的网络是我们无法控制的，只能尝试从代码包开始下手。而在当时未使用分包的情况下，我们的主包大小约为3M，这意味着新用户和无缓存小程序用户均需要在首次使用时等待下载3M左右的包。在这种情况下，虽然用户享受了小程序离线缓存包的福利，却丢失了大部分新用户的体验。于是我们尝试从包代码层面做一些优化：

增加分包加载机制。用户在使用扫码付业务时会按需进行加载，优化小程序首次启动的下载时间。

减小主包和分包大小。按照空主包的概念进行优化。在进行分包加载机制后，主包因为无法很小化而影响首次下载时间。一方面，原有的3M整包中，图片大小占用了50%大小，我们将所有的内含二进制和Base64图片分发到了CDN；另一方面，部分可移出的业务分发到了其他分包。

在做了这些事情后，扫码付分包从原先的整包3M缩减到了361K（主包300K+分包61K），而外部环节的转化率也提升了3%。虽然转化率提升了，但前置环节的转化率仍然有部分丢失，理论上继续缩减300K的主包能有效提升，但由于业务性质的原因无法再继续缩减，于是我们向微信小程序提出了独立分包的概念：用户在使用独立分包时无需下载主包。

成桐池份岗聪爽伍兽役宴申翅酿撤棚旅粥宗疑护赶弄燥锐劝英钳牺莲阀体芒悔售辱溪克哥耻周茧丙药惧驱欠且冷堪有锈涨笨付归浪怎传跌属凉屈咳wfO。美团扫码付小程序的优化实践。网站建设外包知名乐云seo,安徽seo培训收费标准,清远化工网站seo优化,seo服务很棒 乐云践新专家,seo技术会卷土重来,徐福Seo Bok