Generated by Answer me with HTML 0.5.10 · 2026-11-02 08:51 · ★ Star on GitHub
AI 寫碼的框架成本：同一個 App 做十二遍
寶可夢基準測試＋HN 227 則討論懶人包
Lead: 同一個寶可夢 App 用 12 種框架各做五遍：MPA 最便宜最快，Angular 最貴最慢。HN 共識是題目太小，結論不要外推。
核心結論
MPA 便宜又快，但別急著換框架
同一 App 各做五遍取中位數：Hono 加 htmx 成本最低，Astro 速度最快，Angular 成本最高、耗時最久、程式碼最多。 Lighthouse 效能分數全員近滿分，真正的差距在 JS 傳輸量、阻塞時間與繪製速度。 HN 227 則留言的主流意見：內容型考題天然利好 MPA，換高互動題目重測才算數。
建造成本：每次執行美元
資料
| Hono 加 htmx | 2.67美元 |
|---|---|
| Astro | 2.76美元 |
| Nuxt | 2.82美元 |
| Vanilla 加 Vite | 2.98美元 |
| Next.js | 3.14美元 |
| Qwik | 3.27美元 |
| TanStack Start | 3.54美元 |
| SolidStart | 3.79美元 |
| React Router | 3.81美元 |
| SvelteKit | 4.28美元 |
| Gracile 加 Lit | 4.65美元 |
| Angular | 4.97美元 |
產物 JS 量：傳輸 KiB
資料
| Astro | 0KiB |
|---|---|
| Vanilla | 7KiB |
| Gracile 加 Lit | 8KiB |
| Hono 加 htmx | 18KiB |
| SvelteKit | 36KiB |
| SolidStart | 40KiB |
| Qwik | 40KiB |
| Nuxt | 84KiB |
| Angular | 93KiB |
| React Router | 115KiB |
| TanStack Start | 118KiB |
| Next.js | 142KiB |
時間與程式碼量
| 框架 | 分鐘 | 程式碼行 |
|---|---|---|
| Astro | 8.2 | 1461 |
| Hono 加 htmx | 8.6 | 1370 |
| Nuxt | 9.0 | 1415 |
| Vanilla | 10.1 | 1492 |
| TanStack Start | 10.3 | 1697 |
| Qwik | 10.7 | 1744 |
| SvelteKit | 10.8 | 1611 |
| Next.js | 10.9 | 1539 |
| SolidStart | 11.2 | 1630 |
| Gracile 加 Lit | 12.1 | 1717 |
| React Router | 12.5 | 1564 |
| Angular | 17.2 | 2009 |
實驗怎麼做的
- 用 PokéAPI 定一個寶可夢應用規格，附一致性測試防作弊。
- 每個框架叫 Opus 5.5 高努力模式做五遍，官方 MCP 或技能陪跑。
- 代理事先不知道要測 Lighthouse 效能與無障礙。
- 取五遍中位數，誠實列出每次的變異範圍。
- 效能只報首頁，分數外加看 JS 量、阻塞時間與繪製速度。
HN 吵什麼
| 論點 | 風向 | 代表聲音 |
|---|---|---|
| 題目太小，結論別外推 | 分歧 | 燈塔全員滿分，沒測到真實體驗 |
| AI 時代還要框架嗎 | 主流 | 框架省決策、防生成漂移 |
| MPA 奪冠只是題目紅利 | 多數 | 換高互動題目再比一次 |
| 自幹最後長成家用框架 | 多數 | 別家公司幫你付維護費 |
| 字串直寫才懂瀏覽器 | 主流 | 安全與事件處理會成惡夢 |
| Angular 墊底該判死刑嗎 | 分歧 | 小題目本來就不該用它 |
限制與提醒
- 寶可夢 App 是內容型、低互動原型，不代表儀表板或遊戲類應用。
- Lighthouse 天然對單頁應用不利，多頁框架幾乎篤定勝出。
- 大型語言模型輸出隨機，單次結果可能只是骰運差。
- MCP 與技能常被代理忽略，這反而貼近真實氛圍寫碼現場。
- 作者開源全部測試，歡迎拿去重測或刷榜。