Nolan Lawson 用 Agent 构建 Pokémon 应用实测 JavaScript 框架的 Token 与时间成本

作者 Nolan Lawson 针对前端社区缺乏证据的决策现状，设计并执行了一项基准测试：指令 Opus 5.5 智能体使用不同 JavaScript 框架构建一个基于 PokéAPI 的 Pokémon 应用，并在 3-5 次迭代中统计开发成本、代码质量及可维护性指标。实验结果显示，Hono+htmx 以 2.67 美元的中位成本成为最经济选项，而 Angular 和 SvelteKit 分别以 4.97 美元和 4.28 美元位居成本顶端；同时 Hono+htmx 仅需 1370 行代码，比 Angular 节省约 30% 的代码量。

在性能维度上，Lighthouse 评分显示无框架（Vanilla）因未优化导致 Cumulative Layout Shift (CLS) 为 0.111，其余框架均达到 0.000，但 Next.js 和 Angular 的 Total Blocking Time (TBT) 分别高达 71ms 和 103ms，显著高于 Astro 和 Gracile+Lit 的 0ms。JavaScript 传输体积方面，Astro 为 0 KiB，而 React Router 和 TanStack Start 分别达到 115 KiB 和 118 KiB。值得注意的是，TanStack Start 的智能体仅在 2/5 次运行中发现技能文件，Nuxt 从未使用 MCP，表明当前框架对 AI 工具的集成存在显著的随机性和不稳定性。

事实层面，该测试证实了服务端渲染（MPA）框架在 LCP 指标上普遍优于客户端渲染（SPA），且代码行数与 Token 消耗呈强正相关。推断认为，在 AI 编码时代，开发者应重新评估技术栈选择逻辑，从“开发体验”转向“Token 效率”，因为更小的代码库意味着更低的维护成本和更少的幻觉风险。猜测部分指出，若未来引入 Service Workers 或 Speculation Rules API 等优化手段，现有排名可能会发生剧烈变化，且当前 MCP 生态可能正在增加而非减少智能体的推理负担。