Chi phí AI thực sự của các framework JavaScript: bài kiểm tra có số liệu thay vì cảm tính

Trong cộng đồng phát triển web, rất nhiều quyết định công nghệ được đưa ra dựa trên "cảm giác" hơn là bằng chứng. Framework thì "nhanh như chớp", công cụ thì "tăng tốc gấp bội" cho quy trình làm việc — nhưng hiếm ai đưa ra số liệu cụ thể. Trong kỷ nguyên AI coding, khi lập trình viên không còn gõ từng dòng code, câu hỏi càng trở nên cấp thiết: liệu chúng ta chọn framework dựa trên bằng chứng, hay vẫn dựa trên thói quen?

Giao diện ứng dụng Pokémon dùng trong bài kiểm tra

Một bài kiểm tra có số liệu, không phải cảm tính

Nolan Lawson — kỹ sư nổi tiếng trong giới frontend — đã tự viết một benchmark để trả lời câu hỏi này. Cách làm khá trực tiếp:

• Thiết kế một ứng dụng Pokémon nhỏ nhưng không quá đơn giản, dùng PokéAPI, có tìm kiếm và lọc.
• Giao cho các AI agent (Opus 5.5, mức effort cao) xây dựng ứng dụng bằng từng framework/meta-framework: Next.js, Nuxt, SvelteKit, Astro, Angular, Qwik, SolidStart, React Router, TanStack Start, Hono+htmx, Gracile+Lit và cả Vanilla JS + Vite.
• Kiểm tra kết quả bằng bộ test tuân thủ spec (dựa trên cây accessibility thay vì DOM thô), đồng thời đo thời gian, số token, số dòng code và điểm Lighthouse.
• Mỗi framework chạy 5 lần, lấy giá trị trung vị để giảm nhiễu.

Tác giả cũng thẳng thắn thừa nhận những điểm yếu của thí nghiệm: ứng dụng nhỏ, mang tính nội dung nhiều hơn tương tác, và bản chất của LLM là "máy sinh từ ngẫu nhiên" nên kết quả có độ biến thiên lớn.

Chi phí: framework nhẹ rẻ hơn đáng kể

Tính theo giá API của Claude Code, chi phí trung vị mỗi lần chạy như sau:

• Hono+htmx: khoảng 2,67 USD
• Astro: 2,76 USD
• Nuxt: 2,82 USD
• Vanilla: 2,98 USD
• Next.js: 3,14 USD
• Angular: 4,97 USD (đắt nhất)

SvelteKit (4,28 USD) và Gracile+Lit (4,65 USD) cũng nằm trong nhóm tốn kém. Lý do khá thú vị: agent phải đọc hướng dẫn migration của SvelteKit v3 vì bản này quá mới so với dữ liệu huấn luyện, còn với Gracile thì agent gần như không biết framework này nên phải clone repo hoặc đọc source đã biên dịch trong node_modules.

Thời gian và số token cũng đi theo xu hướng tương tự: Astro và Hono+htmx hoàn thành nhanh nhất (khoảng 8 phút), Angular chậm nhất (hơn 17 phút) và tiêu tốn gần 10 triệu token mỗi lần chạy.

Điều đáng chú ý là không phải agent nào cũng dùng MCP hay skill đi kèm framework. Ví dụ, MCP của Nuxt không được dùng lần nào, còn Next.js chỉ được đọc file skill trong 1/5 lần chạy.

Chất lượng: điểm Lighthouse gần như bão hòa

Điểm Performance, Accessibility và CLS của hầu hết framework đều xấp xỉ 100, không tạo ra khác biệt đáng kể. Vì vậy, tác giả chuyển sang các chỉ số "nhạy" hơn:

Dung lượng JavaScript tải về phản ánh rõ kích thước framework phía client:

• Astro: gần 0 KiB
• Vanilla: 7 KiB
• Hono+htmx: 18 KiB
• SvelteKit: 36 KiB
• Nuxt: 84 KiB
• Angular: 93 KiB
• Next.js: 142 KiB (cao nhất)

Total Blocking Time (TBT) cũng cho thấy sự phân hóa rõ: Astro, Gracile+Lit, Hono+htmx và Vanilla gần như bằng 0 ms, trong khi Next.js lên tới 71 ms và Angular 103 ms.

Về Largest Contentful Paint (LCP), các MPA (Astro khoảng 810 ms, Gracile 956 ms, Hono+htmx 978 ms) vượt trội so với các SPA (Next.js 2.090 ms, TanStack Start 2.028 ms). Điều này không bất ngờ, vì Lighthouse và Core Web Vitals vốn có xu hướng "thiên vị" các trang render phía server.

Khả năng bảo trì: ít code hơn là lợi thế thật

Số dòng code là chỉ số đơn giản nhưng giàu ý nghĩa, đặc biệt trong kỷ nguyên AI — code càng dài thì số token cho các lần chỉnh sửa sau này càng lớn, tức là chi phí bảo trì thực tế càng cao.

• Hono+htmx: khoảng 1.370 dòng
• Nuxt: 1.415 dòng
• Astro: 1.461 dòng
• Next.js: 1.539 dòng
• Angular: 2.009 dòng (nhiều nhất)

Nói cách khác, Hono+htmx làm được việc tương đương Angular nhưng chỉ với khoảng 70% lượng code, lại còn nhanh hơn.

"Framework không phải công cụ để tổ chức code của bạn; chúng là công cụ để tổ chức tâm trí bạn." — Rich Harris

Bài học cho lập trình viên Việt Nam

Với các đội ngũ phát triển tại Việt Nam đang ngày càng dùng AI để tăng tốc, kết quả này mang lại vài gợi ý thực tế:

• Chi phí token là chi phí thật. Nếu trả theo API, việc chọn framework "nặng" có thể đội chi phí lên đáng kể qua thời gian, nhất là khi codebase phình to.
• MPA không còn là lựa chọn "cũ". Với các dự án thiên về nội dung — tin tức, thương mại điện tử, blog — Astro hay htmx có thể tiết kiệm cả chi phí phát triển lẫn băng thông cho người dùng cuối.
• Đừng tin vào lời quảng cáo. Hãy tự đo, tự benchmark trên chính bài toán của mình thay vì chọn theo xu hướng.

Tác giả nhấn mạnh anh không có ý "dìm" framework nào — bản thân anh quen biết và tôn trọng nhiều tác giả của các framework trên. Mục tiêu của bài viết là chứng minh rằng trong kỷ nguyên AI coding, chúng ta vẫn có thể ra quyết định dựa trên bằng chứng thay vì cảm tính.

Toàn bộ mã nguồn benchmark được công bố trên GitHub để bất kỳ ai cũng có thể chạy lại hoặc mở rộng — với nhiều vòng lặp hơn, nhiều agent khác nhau, nhiều loại ứng dụng khác nhau, hoặc đo thêm các chỉ số tương tác trong ứng dụng.