Đánh giá chi phí của AI agent trên các framework JavaScript

Vào tháng 10 năm 2026, nhà phát triển Nolan Lawson đã công bố một so sánh dựa trên dữ liệu về hiệu suất của các framework JavaScript hiện đại khi được xây dựng bởi các AI agent. Nghiên cứu này thách thức cách ra quyết định "dựa vào cảm tính" đang phổ biến trong phát triển frontend bằng cách đo lường các chỉ số thực tế về chi phí, thời gian và chất lượng. Sử dụng Claude Opus 5.5, Lawson giao nhiệm vụ cho một AI agent xây dựng cùng một ứng dụng Pokémon trên mười hai stack công nghệ khác nhau để xác định xem công cụ nào thực sự tối ưu hóa cho quy trình làm việc agentic.

Chuyện gì đã xảy ra

Lawson thiết kế một benchmark để kiểm tra giả thuyết rằng một số framework nhất định vốn dĩ phù hợp hơn cho lập trình có hỗ trợ của AI. Ông chọn một dự án không quá phức tạp nhưng được xác định rõ ràng: một ứng dụng danh bạ Pokémon sử dụng PokéAPI. Ứng dụng yêu cầu liệt kê các Pokémon, hiển thị loại và chiêu thức của chúng, đồng thời triển khai chức năng tìm kiếm và lọc. Để đảm bảo tính công bằng, mỗi framework được kết hợp với máy chủ Model Context Protocol (MCP) chính thức hoặc các kỹ năng agent nếu có, nhằm ngăn chặn những bất lợi do thiếu hụt dữ liệu huấn luyện.

Thí nghiệm bao gồm việc chạy agent năm lần cho mỗi framework để tính đến tính ngẫu nhiên của các mô hình ngôn ngữ lớn. Ngoại lệ duy nhất là Angular, framework này không tạo ra được ứng dụng có thể đo lường trong hai trường hợp, dẫn đến chỉ có ba vòng lặp hợp lệ cho một số chỉ số. Agent hoạt động trong môi trường sandbox mà không biết rằng nó sẽ được đánh giá dựa trên điểm hiệu suất Lighthouse, mặc dù nó được cung cấp một bộ bài kiểm tra tuân thủ để ngăn chặn gian lận. Mục tiêu là đo lường kết quả thực tế thay vì trải nghiệm phát triển lý thuyết.

Kết quả cho thấy sự biến động lớn về cả chi phí và hiệu quả. Hono kết hợp với htmx nổi lên như lựa chọn tiết kiệm chi phí nhất, với chi phí trung vị là $2.67 mỗi lần chạy. Ngược lại, Angular chứng tỏ là đắt đỏ nhất ở mức $4.97, trong khi SvelteKit và Gracile cộng với Lit cũng xếp hạng cao về chi phí. Điều thú vị là JavaScript thuần (vanilla) với Vite lại kém hiệu quả hơn một số framework, gợi ý rằng các lớp trừu tượng có cấu trúc có thể hỗ trợ AI agent tốt hơn cơ sở hạ tầng thô. Nghiên cứu nhấn mạnh rằng các tuyên bố về sự vượt trội của framework đối với AI thường thiếu bằng chứng thực nghiệm, và benchmark này cung cấp một đường cơ sở cụ thể để đánh giá.

Cách thức hoạt động

Benchmark dựa trên một đặc tả nghiêm ngặt và quy trình đánh giá tự động. Lawson hướng dẫn AI agent, Claude Opus 5.5, xây dựng ứng dụng với các cài đặt nỗ lực cao. Agent không được đưa ra các chỉ thị kiến trúc cụ thể, chẳng hạn như lựa chọn giữa render phía server hay render phía client, cho phép nó đưa ra quyết định dựa trên quy ước của framework. Cách tiếp cận này kiểm tra mức độ thành thạo của agent trong việc điều hướng hệ sinh thái mà không cần sự chỉ đạo nặng nề từ con người.

Việc đánh giá tập trung vào bốn khía cạnh chính: thời gian phát triển, mức tiêu thụ token, số dòng code và các chỉ số chất lượng. Chất lượng được đánh giá bằng Lighthouse cho điểm hiệu suất và khả năng truy cập, cùng với một bộ bài kiểm tra tuân thủ tùy chỉnh kiểm tra cây khả năng truy cập (accessibility tree) thay vì DOM thô. Phương pháp này thích ứng với các framework như Lit sử dụng shadow DOM, đảm bảo rằng các khác biệt về cấu trúc không làm giảm điểm số. Bằng cách đo lường các giá trị trung vị qua nhiều lần chạy, nghiên cứu giảm thiểu tác động của các ngoại lai ngẫu nhiên vốn có trong đầu ra của AI tạo sinh.

Chi tiết quan trọng

• Hono+htmx là framework rẻ nhất để xây dựng, với chi phí trung vị $2.67 mỗi lần chạy.
• Angular là đắt nhất với chi phí trung vị $4.97 và mất thời gian lâu nhất là 17.2 phút.
• JavaScript thuần với Vite có chi phí $2.98, kém hiệu quả hơn một số framework có cấu trúc.
• Các agent SvelteKit thường xuyên đọc hướng dẫn di trú v3, làm tăng mức sử dụng token do tính mới lạ của nó trong dữ liệu huấn luyện.
• Việc agent sử dụng các máy chủ MCP và kỹ năng không nhất quán, với MCP của Nuxt không bao giờ được sử dụng và kỹ năng của Next.js hiếm khi được truy cập.
• Các chỉ số Lighthouse thiên vị các framework ứng dụng đa trang (multi-page application) do những định kiến vốn có chống lại ứng dụng một trang (single-page applications).

Tại sao điều này quan trọng

Đối với các trưởng nhóm kỹ thuật và nhà sáng lập, nghiên cứu này nhấn mạnh các tác động tài chính của việc lựa chọn framework trong quy trình làm việc agentic. Khi các AI agent đảm nhận nhiều nhiệm vụ lập trình hơn, chi phí cho mỗi tính năng trở thành một chỉ số hữu hình thay vì một mối lo ngại trừu tượng. Các framework yêu cầu ít token hơn và ít thời gian hơn để tạo ra code đúng đắn trực tiếp giảm chi phí vận hành. Sự biến động quan sát được, chẳng hạn như tỷ lệ thất bại và chi phí cao hơn của Angular, gợi ý rằng một số hệ sinh thái chưa được tối ưu hóa cho tương tác với AI, có thể dẫn đến vượt ngân sách trong các dự án quy mô lớn.

Hơn nữa, kết quả thách thức quan niệm rằng code "thuần" luôn là con đường hiệu quả nhất cho AI. Dữ liệu cho thấy các framework cung cấp các rào chắn và quy ước giúp agent tránh những cạm bẫy phổ biến, giảm nhu cầu nạp ngữ cảnh mở rộng. Insight này rất quan trọng cho các đội ngũ đang cân nhắc việc áp dụng các meta-framework mới hay gắn bó với các thư viện đã thiết lập. Nó gợi ý rằng lớp trừu tượng phù hợp có thể giảm tải nhận thức cho AI, dẫn đến đầu ra nhanh hơn và đáng tin cậy hơn.

Bạn có thể làm gì

• Benchmark framework hiện tại của bạn bằng cách để một AI agent xây dựng một component nhỏ, chuẩn hóa và đo lường mức sử dụng token.
• Đảm bảo các công cụ AI của đội ngũ bạn được cấu hình để sử dụng các máy chủ MCP hoặc kỹ năng chính thức nhằm tối đa hóa mức độ liên quan của ngữ cảnh.
• Xem xét tổng chi phí sở hữu, bao gồm mức tiêu thụ token AI, khi đánh giá các framework JavaScript mới.
• Chạy nhiều vòng lặp code do AI tạo ra để tính đến sự biến động ngẫu nhiên trước khi đưa ra các quyết định kiến trúc.
• Sử dụng kiểm thử dựa trên cây khả năng truy cập thay vì kiểm tra DOM để đánh giá công bằng các framework sử dụng shadow DOM.
• Giám sát hành vi của agent để xem liệu nó có tận dụng hiệu quả tài liệu và tệp kỹ năng sẵn có trong quá trình phát triển hay không.