实测12个JS框架 AI写代码成本相差86%

时间：2026 年 10 月 28 日（基准原文发布），2026 年 11 月 1 日（ic.work 中文解读、LavX News 英文跟进） 地点：线上沙箱环境；测试机为 2025 款 Framework 13 笔记本，Ubuntu 24.04 系统，4 倍 CPU 降速与 Slow 4G 网络模拟；作者 Nolan Lawson 在美国西雅图 人物：Nolan Lawson（Web 开发者、Socket 工程师，博客 Read the Tea Leaves 作者），执行编码任务的 Agent 为 Anthropic 的 Claude Code 搭配 Opus 5.5 模型（high effort 模式） 事件详情：作者用同一份宝可梦应用规格（调用 PokéAPI 数据），让 Opus 5.5 在沙箱里分别用 12 种 JavaScript 框架和元框架各构建 5 次，其中 Angular 有 2 次没能产出可用应用，实际取 3 次；产出再用基于可访问性树的一致性测试套件校验，最后跑 Lighthouse 测性能与可访问性。差距相当明显：单次构建成本最低的 Hono+htmx 为 2.67 美元，Astro 2.76 美元，Nuxt 2.82 美元，Next.js 3.14 美元，最贵的 Angular 为 4.97 美元，最贵比最便宜高约 86%；耗时上 Astro 每次 8.2 分钟最快，Angular 17.2 分钟最慢；Token 消耗 Nuxt 每次 385 万最低，SvelteKit 853 万、Gracile+Lit 904 万、Angular 976 万最高。前端体积方面，Astro 只发出 0 KiB 的 JavaScript，Hono+htmx 18 KiB，Angular 93 KiB，Next.js 142 KiB；主线程阻塞时间 Angular 103 毫秒、Next.js 71 毫秒，Astro 为 0。代码行数 Hono+htmx 1370 行，Angular 2009 行，前者约为后者的七成。Lighthouse 分数上可访问性全部是 100 分，CLS 除原生方案外都是 0.000，性能分集中在 97 到 100 分之间。该文章在 Hacker News 上拿到七十多赞、四十多条评论（抓取时点），并被 ic.work、LavX News、Digest AI 等媒体跟进解读。 背景：前端选型长期靠感觉，"更快""更适合开发者体验"这类说法通常不带证据，Alex Russell 把这段时期称作前端的"失去的十年"。进入 Agent 时代后，"哪个框架更适合 Agent"的说法同样缺少验证，作者因此让每个框架都配上官方 MCP 或技能包，尽量给各方案一个公平起点，测试过程则交给 Opus 5.5 按同一份规格自行实现。 影响：这份对照给"AI 写代码该选什么栈"提供了少见的量化依据。值得留意的是，给 Agent 配套官方 MCP 与技能包并不自动等于省钱：SvelteKit 因为版本太新、不在 Opus 5.5 的训练数据里，Agent 每轮都要重读迁移指南，反而落在最贵的几个之列；Nuxt 的 MCP 在 5 次构建中一次都没被用上。成本也不止于首轮账单，代码行数直接决定后续每次改动要消耗的 token，框架体量的差距会被长期放大。对 MCP 与技能包生态而言，这份基准的结论也提出质疑：喂给模型的辅助文档越多，账单可能越贵。 总结：这份基准第一次把前端框架的"感觉之争"放到同一把尺子上量，结论是 AI 时代最省的组合并不是社区声量最高的那几个。按作者数据，Hono+htmx 与 Astro 在成本、耗时和产物体积上都排在前列，SvelteKit、Gracile+Lit 与 Angular 最贵，Angular 的代码量还被 Hono+htmx 少掉约三成。作者自己也提醒实验并不完美，样本只是一个小应用，结果随机性大，不同轮次波动明显。真正值得带走的是两条：选框架时"更适合 Agent"应该拿数据说话；喂给模型的文档越多，单次成本反而可能越高。 常见问题： 问：AI 写代码，选哪个 JS 框架最省钱？ 答：Hono+htmx（每次 2.67 美元）与 Astro（2.76 美元）最便宜，Angular（4.97 美元）最贵，差距来自框架体量与文档新旧。 问：给 AI 配的 MCP 和技能包越多越好吗？ 答：不一定。Nuxt 的 MCP 5 次构建一次没用上；SvelteKit 因版本太新，Agent 每轮都要重读迁移指南，成本反而更高。 参考来源： Nolan Lawson 基准原文（Read the Tea Leaves） https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/ ic.work 中文解读《Opus 5.5 实测 12 大 JavaScript 框架 AI 账单》 https://www.ic.work/article/opus-5-5-javascript-framework-ai-cost-benchmark LavX News 英文报道《AI Agents Built the Same Pokémon App in 12 Frameworks》 https://news.lavx.hu/article/ai-agents-built-the-same-pok-mon-app-in-12-frameworks-costs-diverged-by-86 Digest AI 英文报道《Benchmark measures AI coding costs for JavaScript frameworks》 https://digestai.news/story/benchmark-measures-ai-coding-costs-for-javascript-frameworks Hacker News 讨论页 https://news.ycombinator.com/item?id=50323088 基准代码与结果仓库 nolanlawson/agent-framework-benchmark https://github.com/nolanlawson/agent-framework-benchmark