Benchmark JavaScript freymvorklarının AI quruluş xərclərini və performansını müqayisə edir

Bir benchmark eyni kiçik Pokemon tətbiqini hər biri ilə qurmaq üçün AI agentdən istifadə edərək 12 JavaScript freymvorkunu və meta-freymvorkunu müqayisə etdi. O, bir neçə iş boyu median xərci, vaxtı, tokenləri, kod sətirlərini və Lighthouse performansı ilə əlçatanlığı ölçdü. Xərclər Hono və htmx üçün $2.67-dən Angular üçün $4.97-yə qədər dəyişdi, çoxu Lighthouse əlçatanlığında 100 bal topladı.

Quruluş xərci və səy

Median quruluş xərcləri Hono və htmx üçün $2.67-dən Angular üçün $4.97-yə qədər dəyişdi. SvelteKit $4.28, Gracile və Lit $4.65 və Angular $4.97 xərclədi, bu da onları digərlərindən daha bahalı etdi. Benchmark bildirir ki, SvelteKit agentləri hər işdə SvelteKit v3 miqrasiya təlimatını oxuyub, Gracile agentləri tez-tez onun repozitoriyasını klonlayıb və ya kompilyasiya olunmuş mənbəni oxuyub, Anguların daha yüksək xərci isə daha böyük kod ölçüsü ilə əlaqəli olub. Median iş müddəti Astro üçün 8.2 dəqiqədən Angular üçün 17.2 dəqiqəyə qədər dəyişdi, token istifadəsi isə Nuxt üçün 3.85 milyondan Angular üçün 9.76 milyona qədər dəyişdi.

Performans və əlçatanlıq

Lighthouse əlçatanlığı hər freymvork üçün 100 oldu. Performans 97 ilə 100 arasında dəyişdi; Vanilla 97, Next.js və TanStack Start isə 99 bal topladı. Göndərilən JavaScript baytları Astro üçün 0 KiB-dən Next.js üçün 142 KiB-yə qədər dəyişdi. Ümumi Bloklama Vaxtı bir neçə freymvork üçün 0 ms-dən Angular üçün 103 ms-yə qədər dəyişdi. Ən Böyük Məzmunlu Boyama Astro üçün 810 ms-dən Next.js üçün 2090 ms-yə qədər dəyişdi və benchmark qeyd edir ki, bu metrik ümumilikdə çoxsəhifəli tətbiqləri mükafatlandırır, təksəhifəli tətbiqləri isə cəzalandırır.

Kod ölçüsü və saxlanma

Boş olmayan mənbə kodu sətirləri Hono və htmx üçün 1370-dən Angular üçün 2009-a qədər dəyişdi. Yazı Rich Harrisin bu sitatını gətirir: "Freymvorklar kodunuzu təşkil etmək üçün alət deyil; onlar zehninizi təşkil etmək üçün alətdir." O həmçinin bildirir ki, kod ölçüsü redaktə zamanı gələcək token xərclərinə təsir edir. Hono və htmx təxminən eyni tətbiqi Anguların kodunun təxminən 70 faizi ilə və daha sürətli Lighthouse nəticələri ilə təqdim etdi.

Məhdudiyyətlər və metod

Tətbiq nisbətən məzmun əsaslı Pokemon saytı idi və qarşılıqlı əlaqə az idi; Lighthouse və Core Web Vitals təksəhifəli tətbiqlərə qarşı tərəfkeşdir. Test mümkün olan yerlərdə rəsmi MCP və ya bacarıqlardan istifadə etdi, SSR və ya CSR tələb etmədi və Tailwind və Bootstrap-dən qaçındı. Müəllif LLM çıxışı və Lighthouse nəticələri stoxastik olduğuna görə bir neçə iterasiya apardı; Angular iki dəfə uğursuz oldu, ona görə onun rəqəmləri beş əvəzinə üç işdən istifadə edir. Benchmark və kod GitHub-da mövcuddur.

Mənbələr: nolanlawson.com