Vue.js：极速选手还是高风险赌徒？

在本文中，我们来欣赏一下 Vue.js Core 存储库——这是目前最受欢迎的用户界面构建框架之一（https://github.com/vuejs/）。它简洁、快速，深受开发人员的喜爱，而在这样顺滑的体验背后有一个强大的引擎处理各种事务——那就是 Vue.js Core 存储库。

这篇案例研究深入探讨了他们开发过程的点点滴滴，特别是他们的团队如何设法实现极快的合并速度。现在软件的部署速度就像短跑运动员跑到最后一圈一样不断加快，而本文中的见解可以帮助其他项目达到类似的速度。

下面就来逐步分析吧——先看数字，再找乐趣！

我们的调查一开始很简单，我们像大家一样平常地浏览存储库的代码，这时 Vue.js Core 库的某些东西阻止了我们前进。它们的合并太顺利了——就像钟表一样，时间安排完美，执行精确。感觉就像我们偶然发现了一个隐藏在众目睽睽之下的秘密公式。自然而然，我们的中间件侦探本能觉醒了。是什么造就了这个近乎完美的过程？这个故事是否还有更多不为人知的秘密？

为了破案，我们拿出了重型工具——中间件 OSS（https://github.com/middlewarehq/middleware）——来深入挖掘 Dora Metrics 数据。当我们开始分析 Vue 指标时，不禁兴奋不已。

我们发现了什么？

Vue.js Core 团队在合并拉取请求时非常注重速度——他们就像 F1 赛车手跑到了代码合并界一样，以令人难以置信的敏捷性飞驰而过。看看这些令人瞠目结舌的数字：

• 2024 年 6 月：每次合并只需 3.6 小时。他们开局不错！

• 2024 年 7 月：令人震惊的 1.1 小时。是的，你没看错——这简直就是 F1 进站！

• 2024 年 8 月：很不错的 16.9 小时。依旧很快，但更像是在赛道上小心翼翼地跑一圈，远低于平均水平。

那么，他们是怎样让这个速度一直维持在这么高的水平呢？以下是内幕消息：

• 未经审查就合并的 PR 数量很多：在最近的 99 个 PR 中，有 88 个未经正式审查就合并了。这就像在 VIP 俱乐部跳过排队，大大减少了等待时间。例如 PR #11223 和 PR #11036。

• 高效的审阅者：对于确实需要审查的 PR，团队会迅速采取行动。可以想象他们是 F1 维修站的技师，能以创纪录的速度更换轮胎。

• 自动化流程：像 Renovate[bot] 这样的机器人处理依赖项更新和维护任务。它们是无名英雄，在团队专注于高速合并时负责处理手动合并的工作量。

简而言之，Vue.js Core 的合并过程就像观看 F1 大赛一样，迅速、高效，有时还令人兴奋！

尽管 Vue.js Core 团队擅长以闪电般的速度合并拉取请求，但他们对变更的交付周期却像坐过山车一样跌宕起伏：

• 6 月 24 日：13.4 小时——一切进展顺利。

• 7 月 24 日：大幅放缓至 17 天——想象一下在新年前夕的高峰时段，在高速公路上遇到交通堵塞。

• 8 月 24 日：进一步放慢至 24 天——就像被困在银行的无尽队列中。

这些剧烈波动暗示着在代码进入合并阶段之前存在一些隐蔽的瓶颈。以下是可能导致动荡的原因：

• 首次响应时间延长了：在 7 月和 8 月，获得首次响应的时间就像等待缓慢移动的电梯一样——平均需要近 2.5 天加 1.1 小时。很明显，获得反馈的速度并不快。

• 返工时间：8 月份返工时间激增，平均为 56 分钟。代码似乎需要额外停顿几次才能进行微调，然后才能合并。

因此，虽然 Vue.js 团队可以轻松完成合并，但显然有一些幕后故事影响了整个流程中变更的完成速度。

Vue 团队需要处理一系列任务——就像厨师熟练地平衡不同的配料以制作出完美的菜肴。以下是他们管理厨房的方式：

• 依赖项更新：Renovate[bot] 是这里的关键，它在幕后处理大量常规任务。就像一个在你忙得不可开交时送咖啡的朋友一样，Renovate[bot] 会自动管理依赖项更新，让事情顺利推进下去。看看 PR #11317 和 PR #11243 就知道了——两者都得到了轻松处理。

• 错误修复和性能改进：这些 PR 就像代码的春季大扫除一样，旨在清除旧错误并调整性能。开发人员会深入代码库以消除错误，并使一切运行得更顺畅。查看 PR #11403 和 PR#11360，了解一些消除错误和提高性能的可靠示例。

• 文档和测试：不要忘记基本要素！保持文档和测试处于最新状态是所有优质存储库的支柱工作。这种持续的努力可确保开发人员和用户都能随时了解最新情况。PR #11105 和 PR #11483 完美展示了文档和测试更新如何帮助维护项目的长期健康。

• 返工：存储库的返工时间仅为 4.58 小时，短到令人印象深刻。想象一下，因为忘了带鸡蛋而不得不再次去杂货店——这种事情很烦人，但如果你能将时间缩短到最低限度，这就几乎不是什么问题了。他们致力于于干净、结构良好的代码和高效的审查，所以可以避免过多的来回往复，让项目保持正轨，而不会出现不必要的延误。

所有这些例子都表明一种平衡的 PR 方法可以确保代码库保持最佳状态，从小的错误修复到大的性能提升都会受益。

在使用我们的 DORA Metrics 工具包仔细分析 Vue Core 后，我们得到了以下独家结果：Vue 得分高达 8/10。这里的重点是快速合并和频繁部署，这会让任何开发团队都羡慕不已。但是，就像其他编码英雄一样，Vue 也有自己的弱点——交付周期波动和返工时间会在你最意想不到的时候突然出现。

我们的分析中最大的收获是什么？Vue 的流程效率和自动化都恰到好处，但消除这些一致性问题能让他们的 DORA 得分飙升。与谷歌的年度 DORA 报告相比，Vue 的表现是一流水平。希望你的项目也能达到同样的效率水平吗？Middleware 的 OSS 是你追求完美分数的首选伙伴！

Vue Core 的策略值得复制。以下是你的代码库可以学到的东西：

• 简化审核：对于较小或低风险的更改，可以考虑跳过审核以节省时间——就像 Vue 对其 88% 的 PR 所做的那样。

• 鼓励快速的审核者回复：Vue 的快速合并是因为审核者不会在工作中打瞌睡。及时审核文化可以创造奇迹。

• 自动化日常工作：使用机器人处理日常任务，让开发人员腾出时间进行更重要的工作。像 Renovate[bot] 这样的机器人使 Vue 的依赖项更新任务几乎从待办事项列表中消失了。

原文链接：

https://middlewarehq.com/blog/vuejs-case-study-dora-metrics-speed-demon-or-just-high-risk-gambler

声明：本文为 InfoQ 翻译，未经许可禁止转载。

公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞 👍 或者 ➕关注 都是对我最大的支持。

欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【进阶学习】拉你进技术交流群

关注公众号后，在首页：

• 回复 面试题，获取最新大厂面试资料。
• 回复 简历，获取 3200 套 简历模板。
• 回复 React实战，获取 React 最新实战教程。
• 回复 Vue实战，获取 Vue 最新实战教程。
• 回复 ts，获取 TypeScript 精讲课程。
• 回复 vite，获取 Vite 精讲课程。
• 回复 uniapp，获取 uniapp 精讲课程。
• 回复 js书籍，获取 js 进阶 必看书籍。
• 回复 Node，获取 Nodejs+koa2 实战教程。
• 回复 数据结构算法，获取数据结构算法教程。
• 回复 架构师，获取 架构师学习资源教程。
• 更多教程资源应有尽有，欢迎 关注获取。