AI代理编码基准测试:服务器端框架效率优于SPA

Lawson 发布 AI 代理编码基准测试,涵盖 12 个主流框架。结果显示服务器端框架效率显著高于 SPA,Hono 搭配 htmx 以 2.67 美元中位成本最具性价比。

在 JavaScript 开发领域,开发者往往对特定框架抱有强烈偏好,但这种“人类中心”的直觉未必适用于人工智能代理。当 AI 模型被指派执行编码任务时,那些符合人类习惯的工具可能并非最高效的选择。

Hono中位成本仅2.67美元

Lawson 指出,当前 Web 开发社区存在一种基于“感觉”而非严谨数据的决策倾向,新框架层出不穷却难以真正解决旧有痛点。为了避免这种主观偏见影响 AI 领域的评估,他建立了一套基准测试体系,旨在比较不同 JavaScript 框架在相同代理模型下的表现。该研究涵盖了 12 个主流框架,重点评估了构建成本、代码可维护性以及最终应用的用户性能。

测试结果显示,AI 代理在处理以服务器为中心的框架时效率显著高于客户端繁重的单页应用程序(SPA)框架。这一发现或许会让 React 的支持者感到意外,但更核心的结论在于:代理程序更倾向于利用那些具备规范清晰、API 稳定且结构简洁特性的框架。

实验设计与评估方法

为了进行对比,Lawson 为 Claude Code 代理编写了指令,要求使用 PokéAPI 构建一个基础的 Pokémon 网络应用。测试覆盖了以下 12 种技术栈:Angular、Astro、Gracile with Lit、Hono with htmx、Vanilla JavaScript with Vite、Next.js、Nuxt、Qwik、React Router、TanStack Start、SolidStart 以及 SvelteKit。

每个技术栈均在五个独立的沙箱环境中进行评估,以平滑模型性能的波动。为确保生成的应用符合规格,Lawson 部署了定制的自动化测试套件,通过查询浏览器的可访问性树来验证按钮和输入框等交互元素是否真实有效,防止 LLM 采取伪造元素的捷径。此外,还利用 Google Lighthouse 测量了传输大小和运行时性能。

若框架提供官方 MCP 服务器、Claude 插件或代理技能文件,这些资源会被提供给代理,尽管代理并不总是调用它们。实验未强制规定特定的应用架构。

成本与性能对比分析

不同框架在构建成本上的差异显著。最具性价比的方案是 Hono 搭配 htmx,其构建每个 PokeApp 的中位成本仅为 2.67 美元。由于这两项技术完全在服务器端运行,消除了同步客户端与服务器所需的复杂架构检查,从而最小化了代码量并降低了输出消耗。

Astro 紧随其后,中位成本为 2.76 美元。与 Hono/htmx 类似,Astro 也在服务器端处理所有逻辑。这种架构使其实现了最快的构建和测试时间,中位数仅为 8.2 分钟。

在类 SPA 方案中,Nuxt 是最具成本效益的选择,费用为 2.82 美元。Nuxt 基于 Vue.js,但在服务器上渲染代码并在客户端进行水合。其“有意见”的设计减少了代理需要编写的样板代码,内部处理的数据传输和文件路由也进一步简化了开发流程。值得注意的是,虽然 Nuxt 消耗的 Token 数量最少(3.85 万),但由于 Claude 对输入和输出 Token 收费不同,这并未使其成为绝对最便宜的选项。Nuxt 生成的代码行数为 1,415 行,略多于 Hono/htmx 的 1,370 行。总体而言,这三个顶级框架的表现处于彼此的误差范围内。

相比之下,一些传统框架表现较差。基于 SvelteKit 的应用生成成本为 4.28 美元,代理频繁查阅文档以适应 Svelte 的最新更新。Angular 则是成本最高的方案,达到 4.97 美元,耗时 17.2 分钟,消耗了 976 万个 Token;在五次尝试中,有两次甚至未能生成可运行的应用。

所有生成的应用均通过了 Lighthouse 的可访问性和性能测试。Lawson 承认,鉴于这是一个相对简单的应用,测试结果具有一定局限性。

在加载性能方面,Astro 应用的最快加载时间(Largest Contentful Paint, LCP)为 810 毫秒。而排在末尾的 Next.js(2,090 毫秒)和 TanStack Start(2,028 毫秒)耗时超过前者两倍,这可能归因于向客户端发送的大量 JavaScript 代码。

行业反思

Lawson 希望这项研究能促使开发者在选择适配 AI 工作的框架时更加严谨。然而,部分开发人员指出,AI 效率并非唯一考量因素,框架的人类可维护性同样重要。一位资深开发者表示,即使某些工具在 AI 辅助下更高效,也不意味着愿意放弃已熟练掌握十年的 React 去重新学习 htmx 或其他类似工具。

此外,随着技术的发展,框架本身也可能借助 AI 实现演进。另一种思路是利用 AI 对现有框架进行现代化改造,而非强行迁移至新框架。

评论 0

0/500

评论需审核后展示,请文明发言

💬
还没有评论,来说两句

相关阅读