Nolan Lawson（勞森，效能工程師）把同一個寶可夢應用，用 12 種 JavaScript 框架各做五遍，比建置成本、速度、程式碼量與 Lighthouse 分數。結論是多頁應用便宜又快，Angular 成本最高、速度最慢——但 227 則 Hacker News 留言吵的是另一件事：題目太小，這結論能外推嗎？以下為原文全文翻譯，後附網友討論整理與圖表懶人包。
- 原文：https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/
- HN 討論：https://news.ycombinator.com/item?id=50323088 （291 分、227 則留言，抓取時間 2026年11月2日）
- 視覺懶人包：https://static.blog.derekhsu.net/ai-cost-js-frameworks-hn.html
原文翻譯
我對網頁開發社群有個小小的不滿：我們做的太多決定都是憑感覺。框架「快得嚇人」，工具會「大幅加速」開發，選對抽象層就開發體驗跟使用者體驗一次滿足。這類吹捧通常零證據。阿萊克斯·羅素（Alex Russell）稱之為「前端失落的十年」，巴爾德·比亞納森（Baldur Bjarnason）說寫程式是種流行文化，而我一直在部落格裡用事實跟基準測試對抗這股風氣。
長久以來，社群之所以對證據過敏，似乎是想要更好的開發體驗：開發者只是喜歡在 React 打 JSX 的感覺，「虛擬 DOM 很快」這類論點多半是事後合理化。（強納森·海特（Jonathan Haidt）大概也會同意。）
但在 AI 代理時代，開發者不再親手打碼、比較不受開發體驗綁架，感覺治國卻依然當道。前端被重寫只因某框架「對代理比較友善」（有人問過代理本人嗎？），生出來的碼「比較快」、代理「比較少犯錯」——同樣沒證據。每次讀到這種文章，我想的都是：「基準測試在哪？」
於是我自己寫了一個，結構很直白：用 PokéAPI 設計一個小而完整的寶可夢應用（列表、屬性、招式、搜尋篩選）；指示代理用特定框架來做；用規格一致性測試套件驗收防作弊；評開發時間、token 花費、程式碼行數、Lighthouse 效能與無障礙分數。
前提先講：這只代表一種應用原型——內容型、低互動，接近維基百科不像 Gmail；各框架都用官方 MCP 或技能；沒指定伺服器渲染或客戶端渲染，一律 Opus 5.5 高努力模式、沙盒執行，代理事先不知道會被測 Lighthouse；CSS 只禁 Tailwind、Bootstrap；一致性測試走無障礙樹而非原始 DOM。而且一切都很隨機——大型語言模型是隨機文字產生器，LCP 每次判定的最大元素都可能不同；解法是每框架做五遍取中位數，並誠實揭露變異。
成本（每次執行，美元）
| 框架 | 成本 | 框架 | 成本 |
|---|---|---|---|
| Hono+htmx | 2.67 | SolidStart | 3.79 |
| Astro | 2.76 | React Router | 3.81 |
| Nuxt | 2.82 | SvelteKit | 4.28 |
| Vanilla | 2.98 | Gracile+Lit | 4.65 |
| Next.js | 3.14 | Angular | 4.97 |
| Qwik | 3.27 | ||
| TanStack Start | 3.54 |
SvelteKit、Gracile+Lit、Angular 明顯較貴：SvelteKit 太新（v3 遷移指南每次都被讀）、Gracile 代理不熟（去 clone 整個 repo）、Angular 程式碼量最大。MCP 使用率落差極大（Hono、React Router、Svelte 每次都用；Nuxt 從沒被用過）——作者認為這反而貼近真實的氛圍寫碼現場。Vanilla（Vite＋無框架）輸給好幾個框架，證明有框架比沒框架好。時間與 token 跟成本一致：Astro 最快（8.2 分鐘）、Angular 最慢（17.2 分鐘）；token 最少 Nuxt（385 萬）、最多 Angular（976 萬）。
品質（Lighthouse，只報首頁）
效能、無障礙、累積版面位移幾乎全員封頂，真正的差距在：JS 傳輸量（Astro 0 KiB、Vanilla 7、Gracile+Lit 8、Hono+htmx 18、SvelteKit 36、Qwik 與 SolidStart 40、Nuxt 84、Angular 93、React Router 115、TanStack Start 118、Next.js 142）；總阻塞時間（MPA 群多為 0 毫秒，Next.js 71 毫秒、Angular 103 毫秒）；最大內容繪製（Astro 810 毫秒、Hono 978、Qwik 979，對比 Next.js 2090、TanStack 2028、Angular 1954）——大致是 JS 包體積的函數，Qwik 是擠進 MPA 群的例外。Angular 兩次失敗是因代理做了拒絕非本地連線的伺服器渲染應用，判規格失敗不重跑。
可維護性（程式碼行數）
Hono+htmx 1370、Nuxt 1415、Astro 1461、Vanilla 1492、Next.js 1539、React Router 1564、SvelteKit 1611、SolidStart 1630、TanStack Start 1697、Gracile+Lit 1717、Qwik 1744、Angular 2009。作者引瑞奇·哈里斯（Rich Harris，Svelte 作者）「框架是組織心智的工具」：代理時代程式碼量等於未來每次修改的 token，也就是字面維護成本。
作者結論
重點不是終極選型答案，而是證明 AI 時代選型仍可憑證據。測試本身多半是氛圍寫出來的，MPA 佔了 Lighthouse 便宜，現在的 MCP 可能弊大於利，全套開源歡迎刷榜。收尾三問：你選技術棧真是看證據，還是用你本來就會的？已放手讓代理寫碼的話，當年一行行打字時做的選擇還有什麼羈絆？連造軟體的方式都在重估，安裝指令後面打什麼不值得重估？
HN 網友討論整理
統計列：291 分、227 則留言、頂層 47 串，Firebase 全樹抓取，覆蓋百分之百。
方法論批判（分歧）： 寶可夢應用太小太靜態，燈塔全員滿分等於沒測到真實體驗，不能外推高互動專案。「選框架很少只看速度，還要算領域知識、長期可維護性與安全紀錄。」（neya）辯護方：「作者示範的是憑證據而非感覺做決策，批評正好拿去做更好的測試。」（shermantanktop）
AI 時代還要框架嗎（主流）： 一方說框架只是多餘樣板，伺服器端生成加少許 JS 就夠；另一方說框架價值在收斂做法、防呆、省脈絡。「純手寫只會讓代理每次都漂移一點。」（oatmealsnap）「React 能寫成純轉換，人跟模型都好推理。」（incrudible）
MPA 奪冠只是題目紅利（多數）： 內容型考題天然利好 MPA，換高互動題目再比。htmx 實戰回報兩極：簡單情境便宜快速，複雜表單狀態代理會撞牆。「靠補足測試才讓代理誠實，HTMX 版反而比 React 更快，但真是場冒險。」（unsloppable）
自幹 vs 框架（多數）： 自幹最終長成沒人維護的家用框架，成熟框架等於別家公司幫付維護費。「當我發現自家程式碼長成了只能由我維護的 Vue，我就換成 Vue 了。」（james_marks）
字串直寫效能戰（主流）： torginus 主串主張多數單頁框架作者不懂瀏覽器引擎，字串直寫超文本才是正道；反方以安全漏洞與事件處理惡夢反駁。
Angular 論戰（分歧）： 有人拿數據判死刑，有人說小題目本來就不該用它。「我開接案公司時 Angular 有用，僵化反而降低切換專案的認知負荷。」（alex_suzuki）
肯定證據派（少數）： 「能多快、多少 token、多少行寫完都和我們在乎的事相關。」（socketcluster）「人類覺得好寫的框架，代理也覺得好寫。」（dzonga）
視覺懶人包
手機版可直接開懶人包直連：https://static.blog.derekhsu.net/ai-cost-js-frameworks-hn.html