写点什么

消费者端微组件的实现

  • 2020-09-17
  • 本文字数:1727 字

    阅读完需:约 6 分钟

消费者端微组件的实现

一、背景

在消费者端,为了方便各条业务线接入,我们通常以组件的方式提供功能,但是组件的发布必须依赖于页面的发布,页面发布又通常需要业务方统一操作,比较影响组件的迭代速度。


经过一段时间的探索和开发,我们实现了一种可以让组件独立发布的异步方案,具备以下特点:


  • 组件级别解耦,独立版本控制

  • 组件单独发布,支持灰度、秒级回滚以及平滑升降级

  • 不影响现有的开发测试流程


下面我介绍一下我们的方案。

二、概述

一句话概括:将组件独立打包成 UMD 格式的 js 文件,页面加载时通过动态生成 script 插入该 js,插入完成后渲染组件。


组件单独打包是异步组件实现的基础,动态获取 js 能实时地获取最新版本,再结合组件动态切换可以实现组件的升降级。


异步组件方案核心功能通过消费者端组件、Node 端插件和打包服务三部分来实现:


  • 组件 Vue-Components-Injector —— 负责 h5 端异步组件的注入,动态渲染和降级,提高异步组件的稳定性。

  • Node 端插件 Apollo-Dynamic-Components —— 使用分布式配置中心 Apollo 处理配置的分发,实现实时组件灰度切流和版本迭代。

  • 打包中心 —— 负责将组件源码打包成浏览器可立即执行的 UMD 代码,保障代码的兼容性。


使用异步组件的流程:


  1. 使用打包工具将组件源代码独立打包成 UMD 代码并上传到 CDN

  2. 修改组件配置,包含代码地址、版本、灰度比例以及降级版本等信息

  3. 页面请求 Node 时,Apollo-Dynamic-Components 插件会根据配置,返回页面需要的异步组件信息并放入全局变量内

  4. 页面加载时,从全局变量获取异步组件信息,并告诉 Vue-Components-Injector 要使用哪个异步组件以及异步组件的变量名

  5. Vue-Components-Injector 构建 script 标签,加载 js 挂载组件并渲染


具体思路如下图所示:


三、具体分析

3.1 组件代码独立打包

首先我们需要将原本 ESM 或者 CJS 的组件打包成 UMD 规范或者 IIFE 的形式。


打包配置可以根据每个组件的内容和使用方法单独配置,不需要修改代码,所以组件依然可以通过 NPM 的方式引入。


打包完成后,为了加快文件的下载速度,通过脚本将文件上传到 cdn 服务器,然后将返回的 cdn 地址同步到配置中心。这样我们就完成了组件打包层面的解耦,将组件打包流程从项目打包中独立出来。


这里有一个优化点,可以把一些公共的依赖排除在外,使用时在项目中配置组件的外部依赖,不过需要注意该组件依赖的版本和项目中依赖的版本是否兼容。


3.2 Node 端获取组件配置

Node 端收到页面请求后,获取当前组件在配置中心包含灰度切流比例和 A/B 版本信息的配置内容,A/B 版本的使用会在组件动态切换中详细介绍。


每次请求都会获取最新的异步组件配置,所以配置更新时能够第一时间在线上生效,异步组件的发布和秒级回滚都依赖这个特性。这个功能我们通过插件的方式来实现,保证业务代码的足够精简、稳定,使用也方便。


Apollo 使用分布式部署,可用性高且能实时更新配置,同时也可以在开发、测试、生产等环境分别部署运行,对开发很友好。

3.3 加载异步组件

为了进一步提高异步组件的加载速度、减少请求次数和耗时,我们将异步组件配置在 node 层返回 html 模版的时候注入。整个流程分为 4 步:


  • vue-components-injector 获取配置

  • 生成 script 标签并插入到页面中,加载脚本

  • 监听 js onload 事件,加载成功后调用回调函数

  • 执行组件挂载


3.4 组件动态切换

线上的稳定性非常重要,当异步组件地址获取异常、加载异常、没有命中切流或其他异常情况发生时,vue-components-injector 会立刻根据配置策略动态切换到其他版本或使用 NPM 引入的原组件,保证异步组件在极端情况下的可用性。


组件升级也是经常出现问题的地方,我们可以通过配置 A/B 版本信息并结合百分比切流来实现组件版本稳定升级。


例如 我们将 A 版本设置为当前版本的 js 地址,B 版本配置为将要发布的新版本,将流量通过修改灰度比例逐步切换到 B 版本,如果遇到异常情况,可以通过修改组件配置立刻切回 A 版本。

四、效果

最近我们陆续将交易下单页中的储值卡和收银台的引入方式替换为异步组件加载,得益于我们比较充分的准备,替换过程比较顺利,上线之后也比较稳定,达到了预期的目标。


后续我们会简化异步组件的接入流程,扩大接入范围,优化有赞消费者端用户体验。


本文转载自公众号有赞 coder(ID:youzan_coder)。


原文链接


消费者端微组件的实现


2020-09-17 10:001786

评论 1 条评论

发布
用户头像
请问一下,现在的有赞商家后台 https://www.youzan.com/v4/dashboard 用的就是这个方案吗?
2021-09-06 16:21
回复
没有更多了
发现更多内容

获奖作品公布,快来看看有没有你!

InfoQ写作社区官方

新春征文 热门活动

Centos7下Nginx编译安装与脚本安装的记录

edd

一起玩转LiteOS组件:TinyFrame

华为云开发者联盟

LiteOS 串口 LiteOS组件 TinyFrame

git 使用总结

麦可

git 开发工具

LabVIEW实现PCB电路板元器件匹配定位(实战篇—7)

不脱发的程序猿

计算机视觉 图像处理 LabVIEW PCB电路板元器件匹配定位

写了这么多年后端,你知道事务脚本模式吗?

蜜糖的代码注释

Java 互联网 后端

模块六

Only

架构师实战营 「架构实战营」

什么时候该减少质量投入?

QualityFocus

质量管理 软件测试 测试思维

架构训练营模块一作业

苍狼

[架构实战营]-架构实训一

邹玉麒

「架构实战营」

JavaScript 之 Proxy

编程三昧

JavaScript 前端 Proxy 1月月更

「架构实战营」模块一作业

hxb

「架构实战营」

LabVIEW仪表盘识别(实战篇—6)

不脱发的程序猿

机器视觉 图像处理 LabVIEW 仪表盘识别

ReactNative进阶(三十六):ES8 中 async 与 await 使用方法详解

No Silver Bullet

Async React Native await 1月月更

我的架构学习之始

浪飞

WorkPlus赋能数字政府迈入发展新阶段

BeeWorks

ChaosCraft:和女朋友一起来 Hackathon 表演绝活丨滑滑蛋团队访谈

PingCAP

微信朋友圈架构设计

刘洋

#架构实战营

音视频技术如何为元宇宙提供全真稳的全新体验之漫话腾讯云音视频 | 社区征文

liuzhen007

音视频 1月月更 新春征文

模块一作业--

Leo

「架构实战营」

微信业务架构 & 学生管理系统架构

凌波微步

「架构实战营」

华为云FusionInsight连续三次获得第一,加速释放数据要素价值

华为云开发者联盟

大数据 数据湖 云原生 FusionInsight 华为云

Android Studio开发flutter快捷键及文本显示技巧。

坚果

flutter 1月月更

复古冰雪传奇H5游戏详细图文架设教程

echeverra

游戏开发 游戏

模块六作业

novoer

「架构实战营」

架构图 - 微信 & 学生管理系统

Ntropy

架构实战营

架构实战营5期模块1作业

lovles

「架构实战营」

小程序电商业务微服务拆分及基础设施选型

swallowluo

架构实战营 #架构实战营 「架构实战营」

华山论“件”:Kafka、RabbitMQ、RocketMQ技能大比拼

华为云开发者联盟

kafka RocketMQ RabbitMQ 华为云 消息中间件

高效管理邮件的方式

NinetyH

工具软件 办公效率 邮件管理

数据治理平台化的通用框架设计

小鲸数据

消费者端微组件的实现_软件工程_吴鹏飞_InfoQ精选文章