前端研发框架Rome实践和演进趋势
如果无法正常显示，请先停止浏览器的去广告插件。
1. 前端研发框架Rome实践和演进趋势
框架生态、度量和趋势思考
2023年6月3日
美团到店
2. 主讲人介绍
陈伟
github.com/screetBloom
Rome
前端研发框架
简单介绍：
2018.7 加入美团，目前在到店餐饮研发 | 前端技术研发组
公司级前端框架Rome的主要负责人之一，工作之余核心参与
Vuese、esbuild、VueCLI的建设，有较丰富的前端工程化相
关经验，近期专注在 LangChain.js 领域的学习探索
3. 目录
• 背景介绍
• 工程生态、演变路径和规模化升级
• 框架开发辅助
• 框架度量和业务实践
• 总结和工程框架趋势思考
4. 背景介绍
研发框架Rome - 业务背景
组织
规模大，横向流动协同多
新人比例高(15%)需快速融入
业务 业务高速迭代（交付快+质量好）
系统 存量系统迁移、升级和重构，频繁系统交接
5. 背景介绍
研发框架Rome - 技术背景
开发架构不统一，无法支撑大团队高效迭代和技术演进
6. 背景介绍
小结
1、基础架构
基于纯静态S3架构进行前端框架建设，原因主要是存量 Node.js 前后端一体的架构存在下述问题：
1、诉求低：事业群早期主要为中后台场景业务，对⻚面秒开、SEO的诉求弱
2、⻛险高：运维的动态扩缩容、峰值流量处理等基础设施⻛险
3、成本高：机器成本、开发人员能力要求高、招聘难度大
因此框架层面建设之初基于S3纯静态架构，建设路径不会采取类似 Egg.js这样的前后端一体框架
2、研发规范
各个团队间流程、规范、技术栈多样，因此框架层也要解决研发流程不规范、交付质量不高等问题，需要提供联动上下游形成系统工程平台，而不仅是CLI工具
7. 一、背景介绍
二、工程生态、演变路径和规模化升级
三、框架开发辅助
四、框架度量和业务实践
五、总结和工程框架趋势思考
8. 工程生态 - 降学习成本
1、目录认知统一（BG/组织ID/项目粒度） 2、收敛依赖选型和版本
3、统一基础开发规范 4、对⻬跨技术栈工程能力和开闭配置
框架约束
工程目录千人千面
上手成本高，心智负担大
业务工程构建配置冗⻓
工程配置耗时且难升级
依赖碎片化+水平参差
基建接入非标、版本多
工程表象
团队横向难复用+重复建设
规模化升级成本高
研发 问题
解决 方案
9. 工程生态 - 降学习成本
跨技术栈认知一致
目录认知一致
开发调试流程和体验一致
Vue
React
工程能力高度对⻬
生态下80%插件在Vue和React
下用法完全一致
10. 工程生态 - 降学习成本
一行代码引入公司基建（CDN容灾）
CDN导致业务不可用时静态资源可以降级重试（支持qiankun）
资源重试
11. 工程生态 - 降学习成本
一行代码引入公司基建（告警监控）
专注业务开发，线上告警、日志链路、首屏计算秒级配置
12. 工程生态 - 降学习成本
一行代码引入公司基建（水印）
专注业务开发，一键完成水印接入
13. 工程生态 - 降建设成本
通过业务一线调研 + 能力盘点，2年内下 共建
并作为大团队横向方案统一维护+接入
31个 工程能力
从历史数据来看，部分核心能力建设成本 15~30pd/个
“小蘑菇” “大树”
生命周期短+重复建设 高质量设计和建设+共建
14. 工程生态 - 降建设成本
基于Serverless的SSR
美团/休娱频道/密室H5 优选/团⻓端/订单管理H5
流量：PV百万级 流量：PV千万级别
秒开：>90% 秒开：>85%
15. 工程生态 - 降建设成本
基于Serverless的SSR（方案流程）
实例（虚拟化+调度）
访问和降级
负载均衡
正常
SSR
Node Runtime
网关
5xx
或超时
返回CSR
自动降级CSR
SSR Page Func SSR Page Func
判断是否流式等 判断是否流式等
S3
Rome+Arche共建形成到店标准
CSR资源
1、⻚面粒度接入 0.5pd
部署时获取
2、自动降级，基本无运维成本
3、复用公司Serverless基建，秒级冷启动+自动扩缩容
CSR Bundle
（默认）
Arche
部署
S3
SSR Bundle
构建（⻚面粒度）
SSR资源
项目
16. 工程生态 - 研发提效
编译提速 - Webpack体系优化
CI/CD
工具性能优化
技术栈
基础通用
缓存复用
Webpack5
开发优化
编译和压缩切
换SWC
Vue技术栈特有配置
（Plugin/Loader）
分粒度构建（page等）
编译和压缩切
换esbuild
TS增量编译
React技术栈特有配置
（Plugin/Loader）
基础跨技术栈Webpack配置
17. 工程生态 - 研发提效
编译提速- 开发时一键Vite
npx rome vite
（createServer拉起⻚面，抹平Webpack差异）
启动
环境变量 Webpack客户端环境变量兼容和注入
配置文件 加载 rome.con g.js 配置转换为Vite配置
技术栈插件
生态兼容
预编译依赖
Vue2/Vue3 SFC+JSX支持
sass兼容
~@import
公司
基建注入
组件库
按需引入
@vitejs/plugin-react支持react
refresh
约定式
路由
html模板
兼容
vite.optimizeDeps
（Vue、React和公司依赖包）
CJS转
ESM
https
等
18. 工程生态 - 研发提效
依赖提速
开发阶段
框架依赖预构建
降体积+降递归依赖数量
切换到Pnpm
Yarn => 当前最优
部署阶段（已集成CI/CD）
迁移抹平工具
Rome 定制Docker镜像
锁pnpm版本+内置常用依赖等
Pnpm install
缓存复用
尝试复用node_modules
19. 演变路径
架构和技术栈演进
构建强依赖Webpack
框架强依赖Vue
面向业界趋势解耦UI框架、构建工具
框架 = 插件机制+构建工具+语言特色插件集合
20. 规模化升级
能力需要落地才能产生价值，如何帮助业务低成本的享受好用的能力？
社区很多是“姜太公钓⻥”
公司内要服务好客户
100+个，均值5pd
TL：我们也想用Rome好的功能，但是我们 有几百个项目，技术升级成本太高了！
可爱客户： 能力很好，但我不敢升！
21. 规模化升级
存量项目迁移
效果
存量Vue+Webpack场景
1.迁移完成比例 99.13%
17+入口, 400+文件
不符合规范
2.已迁移100+ Vue项目
3.线上 0 case
40%
方案一：通过 babel 静态分析依赖然后移动
60%
方案二：基于 webpack 分析依赖然后移动
数据采集和推断
new Webpack
动态分析
webpack/router
+
AST静态分析
recast
数据结构缓存
递归树改有向图
拦截 compiler 流程
compiler.
normalModuleFactory
文件唯一
引用路径多样
拦截 afterResolve
采集数据
AST语法推断
route/store/app等
cache下来
二次复用
移动和修改引用 质量保障
推断api/lib/图片等 前:迁移diff对比提醒
基于文件含义移动 前:QA资源和主R验收
babel => recast
增强 vue-tpl-compiler 中:talos灰度
回写路径 中:灰度指标监控
提醒已备份 后:快速回滚
22. 规模化升级
V1大版本升级
Git仓库
关键流程
1、自动迁移：框架依赖、幽灵依赖、文件等的改写
DevOp s
2、工程源码对比：除迁移内容外，如 /src路径不变化
监控平台
3、Webpack对比：框架配置外不应变化，异常配置告警
4、产物变动：
监控平台
（1）非框架默认安装依赖基于语意化升级
（2）迁移前后entry数量需保持一致
（3）迁移前后产物体积不明显增大（1M）
（4）产物兼容性检测（es5+）
5、线上验证：
（1）基于公司内基建自动化拉取关键⻚面，生成迁移前后UI对比图
（2）流量⻚面的验收报告（ 标杆业务全部由Rome团队升级+写报告 ）
23. 一、背景介绍
二、工程生态、演变路径和规模化升级
三、框架开发辅助
四、框架度量和业务实践
五、总结和工程框架趋势思考
24. 框架开发辅助
为什么基于IDE（VSCode）
业界工程框架开发辅助一般两种形式：Web（Vue UI/Umi UI/Angular Console）、VSCode拓展（IceWorks）
Web
VSCode拓展
25. 框架开发辅助
为什么基于IDE（VSCode）
Web
理解
业界中以 Umi UI（更先进） 和 Vue CLI为主，但是虽然都是基于 Web 去实现的，但
出发点其实大不不一样
（1）体验：Vue UI主要是做工程创建（CLI可视化）、工程分析配置
（2）提效：UMI UI做开发工作台，支持资产插入、执行工程任务（build/lint等）
优势
跨IDE成本低，解决IDE插件中功能交互UI受限的问题（VSCode不会支持）
问题
心智认知：类Umi UI的趋势其实是把开发时用户心智切换到Web端，期望在Chrome
完成所有事情，但研发时高频阶段在IDE看代码、理解代码、写代码，构建/资产/
Lint等任务低频，研发的心智实际切不到Chrome
研发趋势：⻓期研发趋势是部分 Cloud IDE，工程框架的Web端工作台很难融入到研
发链路（创建一般在DevOps）
26. 框架开发辅助
为什么基于IDE（VSCode）
VSCode拓展（IceWorks）
IDE拓展问题
UI交互受限 + 视窗面积 + 跨IDE开发成本
选型原因
用户频次：
1）看、理解和编码是研发阶段最高频的事情，也是工程中最具
提效价值环节，这部分绕不开IDE，且IDE提供大量LS Api
2）交互受限通过用户引导弥补，可接受
研发整合：
1）在研发趋势上可以通过 IDE 拓展形式同步 Cloud IDE
2）可以在研发时通过Webview+Api的正式整合研发系统，用户流程
操作心智可以一直保留在IDE内
VSCode拓展（RomeWorks）
快速落地：
Vue UI、Umi UI采取的NPM包形式都有较严重的版本碎片化问题，难
快速推广大范围落地（如中期增加打点和新能力）
27. 框架开发辅助 - 提效率
1min部署
主要解高频的测试环境部署流程冗⻓问题（2021年Rome非线上环境发布大概10W次/年，核心流程369s/次），节省40~75%
测试卡控异步
部署
测试部署
验收
多平台对接
⻚面粒度CSR/SSR发布
构建环境模拟和实时日志
同步并流转DevOps节点
28. COE检测
框架开发辅助 - 提质量
质量检测
开发时激活窗口检测、PR时di 代码，巨石工程也秒级
质量检测和ESLint的区别
规模治理：规则动态下发 + 研发rule管理中性化
内容不同：包含ESLint，同时增加了故障包版本、兼容
性、历史业务线上故障分析链接
定位不同：ESLint侧重静态语法检测（如未定义就使
用），质量检测则侧重历史故障检测+不重复发生
时机不同：质量检测包含开发时+PR时，更前置、环节
更完善
故障包检测
29. 框架开发辅助 - 提效率
平台流转
1
设计平台
DevOps平台
打开仓库和分支
无脑打开对应设计稿
3
2
4
开发完返回剩余流程
30. 框架开发辅助 - 提效率
文档提示
若资产库或框架文档站 托管在到店内部知识库
开发时会自动获得 开发时文档+跳转提示
31. 框架开发辅助
Cloud IDE结合
得益于业务 IDE 标准的统一，仅需一次开发
可以看到云端 Remote 模式下已经自动安
装了开发辅助，能力完全一致
32. 一、背景介绍
二、工程生态、演变路径和规模化升级
三、框架开发辅助
四、框架度量和业务实践
五、总结和工程框架趋势思考
33. 框架度量和业务实践
框架度量 - 问题和指标
• 标杆业务支撑的怎么样、哪些是我们的优质用户、用户规模是多少？ • 哪些能力用的多、哪些能力用的少、哪些是安装了但是没用起来的？ 【覆盖率】 需求覆盖、项目覆盖、人员覆盖率
做为一个 SaaS产品，如何去量化价值？ 【使用率】 核心能力开启率、能力使用率
• 下个阶段要核心提升什么，紧跟社区、覆盖率、业务重点场景支撑？ 【收益点】 人力节省、工程基建复用、⻛险识
• 我们的客服成本是多少，是否要降低、如何降低？
•
指标
别和拦截、降⻛险运营治理成本
【客服】
客服量、每周客服人力、重复TT重
复客服
34. 框架度量和业务实践
框架度量 - 全景建设
35. 框架度量和业务实践
业务实践
落地1442+工程项目，资产库项目数量达115+，到店多数Web项目均为Rome开发
B端系统
C端H5
ReactNative
36. 一、背景介绍
二、工程生态、演变路径和规模化升级
三、框架开发辅助
四、框架度量和业务实践
五、总结和工程框架趋势思考
37. 总结和工程框架趋势思考
不止于CLI（从需求交付视⻆做框架）
Nginx
核心关注跨技术栈高频、规模化价值高的环节
•
•
•
•
•
依赖环节：依赖环节也是高频提速点，如何帮助大家快速过度到xx方案
开发环节：本地和线上构建优化、开发辅助、工程能力够不够
发布环节：高频的测试环境如何解、线上缓存复用等
链路流转：开发外的链路隐性损耗
…
38. 工程框架趋势思考
未来趋势
开发链路的深度整合
辅助开发工具
Rust基建
构建切换rspack/Vite
编码Copilot
资产库等支持embedding检索
39. Q&A
40. 更多技术干货
欢迎关注“美团技术团队”
扫码查看
前端社招岗位
关注美团招聘
获取更多求职资讯