Бенчмарк порівнює вартість AI-збірки та продуктивність JavaScript-фреймворків

Бенчмарк порівняв 12 JavaScript-фреймворків і мета-фреймворків, доручивши AI-агенту зібрати той самий невеликий застосунок Pokemon з кожним із них. Він вимірював медіанну вартість, час, токени, рядки коду, а також продуктивність і доступність Lighthouse за кількох запусків. Вартість коливалася від $2.67 для Hono плюс htmx до $4.97 для Angular, тоді як більшість фреймворків отримали 100 балів за доступність у Lighthouse.

Вартість і зусилля збірки

Медіанна вартість збірки коливалася від $2.67 для Hono плюс htmx до $4.97 для Angular. SvelteKit коштував $4.28, Gracile плюс Lit $4.65, а Angular $4.97, що робило їх дорожчими за інші. За даними бенчмарку, агенти SvelteKit читали посібник з міграції SvelteKit v3 у кожному запуску, агенти Gracile часто клонували його репозиторій або читали скомпільоване джерело, а вища вартість Angular відповідала більшому розміру коду. Медіанний час запуску коливався від 8.2 хвилини для Astro до 17.2 хвилини для Angular, а використання токенів - від 3.85 мільйона для Nuxt до 9.76 мільйона для Angular.

Продуктивність і доступність

Доступність у Lighthouse становила 100 для кожного фреймворку. Продуктивність була від 97 до 100: Vanilla мав 97, а Next.js і TanStack Start - 99. Надіслані байти JavaScript коливалися від 0 KiB для Astro до 142 KiB для Next.js. Загальний час блокування коливався від 0 мс для кількох фреймворків до 103 мс для Angular. Найбільший змістовний малюнок коливався від 810 мс для Astro до 2090 мс для Next.js, а бенчмарк зазначає, що ця метрика загалом винагороджує багатосторінкові застосунки і карає односторінкові застосунки.

Розмір коду і підтримуваність

Рядки непорожнього вихідного коду коливалися від 1370 для Hono плюс htmx до 2009 для Angular. У дописі цитують Rich Harris: "Фреймворки не є інструментами для впорядкування коду; це інструменти для впорядкування думок." Також стверджується, що розмір коду впливає на майбутні витрати токенів під час редагування. Hono плюс htmx дав приблизно той самий застосунок приблизно з 70 відсотками коду Angular і швидшими результатами Lighthouse.

Застереження і метод

Застосунок був відносно контентним сайтом Pokemon із малою інтерактивністю, а Lighthouse і Core Web Vitals упереджені проти односторінкових застосунків. Тест використовував офіційний MCP або навички, де вони доступні, не вимагав SSR або CSR і уникав Tailwind і Bootstrap. Автор виконав кілька ітерацій, оскільки вивід LLM і результати Lighthouse є стохастичними, а Angular двічі зазнав невдачі, тому його показники використовують три запуски замість п'яти. Бенчмарк і код доступні на GitHub.

Джерела: nolanlawson.com