AI 编程时代怎么选前端框架？同一个应用让 Agent 用 12 种框架各写 5 遍，我整理出这套选型方法
前端框架选型争论了十年，大多数结论都停留在"感觉快""生态好"这种体感层面。到了 AI Agent 大量写代码的今天，选型的账本其实已经变了：过去你为框架付出的是学习成本和打包体积，现在还要加上一笔真金白银------Agent 读代码、写代码、改代码都要消耗 token，框架越啰嗦，账单越长。这篇文章用一份 12 框架、60 次生成的实测数据，讲清楚怎么在 Agent 时代做框架选型，以及怎么自己复现一套这样的评估。
一、为什么选型逻辑变了：从"手感"到"账单"
过去选框架，开发者体验（DX）是第一权重：模板语法顺手、热更新快、招聘好找人。但 Agent 写代码时不挑语法手感，它对框架的"体验"体现在三个可以量化的地方：
- 训练数据里有没有大量这个框架的成熟样例；
- 完成同样功能要生成多少行代码；
- 出错重试、读迁移文档这些动作要烧多少 token。
这三条全部指向同一个方向：框架的代码量和解码难度，直接换算成 token 成本。也就是说，DX 的话语权在下降，"代码经济性"的话语权在上升。理解了这一点，再看后面的数据就不会觉得意外。
二、怎么设计一个能说明问题的对比实验
这份基准（来自前沿 Web 开发者 Nolan Lawson 的博客，2026 年 10 月底发布，发布一周即在技术社区进入热榜前排）的设计值得借鉴，它控制变量的思路你做任何技术选型评估都能套用：
- 固定需求：一个小而完整的宝可梦图鉴应用------列表、搜索、筛选、详情，数据来自公开的 PokéAPI，比"Hello World"复杂，又比真实业务简单可控；
- 固定模型与档位：所有运行使用同一个模型的高性能档，每个框架重复 5 次，取中位数，抵消大模型的随机波动；
- 一致性验收：用一套基于无障碍树的规格符合性测试兜底，防止 Agent"作弊"或者跑偏；
- 统一度量：记录每次的美元成本、token 数、耗时、代码行数，再用 Lighthouse 测性能与无障碍得分；
- 不刻意引导优化：不提示 Agent 用懒加载、预取等性能技巧，模拟普通人真实使用 Agent 的状态。
这里有个关键细节：每个框架都给它配了官方的 MCP 或技能文档，排除"训练数据不公平"的质疑。即便如此，Agent 也不是每次都会用------比如某主流框架的技能文件 5 次里只有 1 次被读到。这个现象本身就说明：指望靠提示词把 Agent 调教到完美状态，在真实世界里并不成立。
三、数据怎么看：三张表读懂 Agent 时代的框架成本
第一张：构建成本（美元/次，5 次中位数）
| 框架 | 成本 | 耗时 | token 数 |
|---|---|---|---|
| Hono+htmx | 2.67 美元 | 8.6 分钟 | 426 万 |
| Astro | 2.76 美元 | 8.2 分钟 | 413 万 |
| Nuxt | 2.82 美元 | 9.0 分钟 | 385 万 |
| 原生 JS+Vite | 2.98 美元 | 10.1 分钟 | 500 万 |
| Next.js | 3.14 美元 | 10.9 分钟 | 499 万 |
| React Router | 3.81 美元 | 12.5 分钟 | 758 万 |
| SvelteKit | 4.28 美元 | 10.8 分钟 | 853 万 |
| Gracile+Lit | 4.65 美元 | 12.1 分钟 | 904 万 |
| Angular | 4.97 美元 | 17.2 分钟 | 976 万 |
最便宜的组合和最贵的组合差了近一倍。注意两个"意外"：
- SvelteKit 以"轻量"著称，构建成本却排在倒数第三------因为它的第 3 版太新，不在模型训练数据里，Agent 每次都要去啃迁移文档。新版本等于贵；
- 原生 JS 并没有省钱，反而输给好几个框架。完全没有框架时，Agent 要自己处理路由、状态、构建配置，反而更费 token。"要不要框架"的答案倾向于要，问题只是要哪个。
第二张：运行时性能（Lighthouse，模拟移动端）
首页性能分几乎全部在 97-100 之间，无障碍分清一色 100------质量上没有拉开差距，差距在体积指标：客户端 JS 传输量，Astro 是 0 KiB（纯服务端渲染），Hono+htmx 18 KiB，SvelteKit 36 KiB，而 Next.js 142 KiB、Angular 93 KiB；总阻塞时间（TBT）上，MPA 阵营普遍 0 毫秒，Next.js 71 毫秒、Angular 103 毫秒。LCP 大体上与 JS 体积正相关。
需要诚实地提醒：Lighthouse 的核心指标天然偏向多页应用（MPA），SPA 在这类测试里吃亏。但换个角度看，"AI 时代网页会同时被爬虫、摘要Agent、搜索Agent 抓取"------它们喜欢的恰好也是小体积、快渲染、HTML 优先的页面。运行时指标和 AI 可抓取性正在变成同一件事。
第三张：代码量（非空行，5 次中位数）
Hono+htmx 1370 行，Nuxt 1415 行，Astro 1461 行，Next.js 1539 行，React Router 1564 行，SvelteKit 1611 行，Angular 2009 行。
这张表最值得反复看。框架存在的意义就是少写代码，而在 Agent 时代代码量的含义升级了：它不仅决定人读维护的难度，还决定未来每一次让 Agent 改这个仓库要塞进去多少上下文、吐出来多少代码------代码量就是长期 token 账单。同一功能，最省和最费的框架差了约 700 行，这个差距会在每次迭代中重复计费。
另外要讲数据素养：这份基准的方差不小。比如 React Router 最贵的一次中位数比 Hono+htmx 贵约 1 美元，但它最便宜的一次（2.82 美元）又比 Hono+htmx 最贵的一次（3.19 美元）还低。单次运行说明不了问题，任何框架选型结论都必须建立在多次运行的中位数上，这是用大模型做评估的基本功。
四、怎么落地：四条可执行的选型经验
结合数据，Agent 时代的框架选型可以这样操作：
- 把"训练数据成熟度"当成一级指标。框架大版本刚发布、破坏性迁移刚发生时，Agent 的成本会显著上升。选稳定多年、样例遍地的版本，比追新更省；
- 用代码量做初筛。同样需求下 Agent 生成的代码行数，是预测长期维护成本的最好单一指标。你可以让 Agent 用两个候选框架各生成一次，直接比行数和 token 数；
- 内容型站点优先 HTML 优先的方案。数据一致显示：服务端渲染、少客户端 JS 的架构，在体积、阻塞时间、LCP 上全面占优，还顺带对 AI 抓取友好。重交互应用另论，但大多数官网、后台、图鉴类应用属于前者；
- 每次评估至少跑 3-5 次取中位数。单次结果会被随机性污染，这是所有基于大模型的对比实验的通用规则。
五、怎么自己做一次这样的验证
不用等别人的基准，五步就能给自己的技术栈做一次：
- 写一份固定的需求规格（一到两个页面、明确的交互和数据来源）；
- 让 Agent 用候选技术各实现 3-5 次，每次开全新会话，不额外提示优化技巧；
- 用统一的功能验收清单核对每个产物，不合格的记为失败，不重跑；
- 记录每次的成本、token 数、耗时、代码行数，取中位数而不是平均值；
- 对通过的产物跑同一套性能测试，把构建成本和运行时成本放在一张表里看。
这套流程一两个小时就能跑完，比读十篇框架对比文章更能回答"你的团队该用什么"。
小结
Agent 写代码并没有让框架选型变简单，而是把选型从口味之争变成了可测量的工程问题：训练数据成熟度决定首次成本，代码量决定长期账单，HTML 优先的架构在运行时和 AI 抓取上双重受益。下次争论框架时，先问一句：中位数数据在哪里？
（数据来源：Nolan Lawson 个人博客基准测试文章，2026 年 10 月发布；测试代码与全部原始结果已在作者的开源仓库公开，可自行复现。）
王亚博（Abel Wang）