前端框架选错导致 AI 开发成本翻倍：Nolan Lawson 实验揭示 Hono+htmx 优势

前 Microsoft Edge 浏览器性能项目经理 Nolan Lawson 进行了一项实验，让 AI Agent 使用 12 种不同的 JavaScript 框架构建同一个 Pokémon 应用，结果显示框架选型对 AI 开发的 Token 消耗、成本及生成代码的可维护性影响显著。

www.sosit.com.cn

实验核心发现

• 成本差异：Hono+htmx 的中位开发成本最低，为 2.67 美元；Angular 最高，达 4.97 美元，接近前者的两倍。
• Token 消耗：Angular 消耗约 976 万 Token，Hono+htmx 为 426 万，相差约 2.3 倍。
• 开发效率：Astro 单次构建中位耗时最短（8.2 分钟），Angular 耗时最长（17.2 分钟）。
• 代码规模：Hono+htmx 生成代码最少（1370 行），Angular 最多（2009 行）。

详细对比数据

实验统一使用 Claude Opus 5.5 模型，各框架在 JavaScript 体积、主线程阻塞时间（TBT）及最大内容绘制时间（LCP）上表现各异：

技王数据恢复

• JavaScript 体积：Astro 最轻（0KiB），Next.js 较重（142KiB）。
• TBT（总阻塞时间）：Astro、Hono+htmx 等为 0ms，Angular 高达 103ms。
• LCP（最大内容绘制）：Astro 最快（810ms），Next.js 较慢（2090ms）。

社区观点与选型建议

实验引发了关于 AI 时代框架选型的讨论。部分开发者认为 AI 削弱了传统框架的必要性，主张回归原生；另一派则认为框架提供的工程约束能降低 AI 出错概率。Lawson 指出，随着 AI 承担更多编码工作，技术选型应更多关注 Agent 的理解能力、Token 效率及生成代码的维护成本。 技王数据恢复

参考链接：https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/

www.sosit.com.cn

技术审核：邓严军｜技王数据恢复实验室技术总监 技王数据恢复