JavaScript ֆրեյմվորքների AI կառուցման արժեքն ու արդյունավետությունը համեմատող բենչմարք
Բենչմարքը մեկ Pokemon հավելված է կառուցել 12 JavaScript ֆրեյմվորքով և համեմատել AI կառուցման արժեքը, ժամանակը, տոկենները, կոդի ծավալը և Lighthouse արդյունքները։ Hono և htmx տարբերակը ամենաէժանն էր՝ մեկ վազքի մեդիանը $2.67, Angular-ը՝ $4.97 և 2009 տող կոդ։
Բենչմարքը 12 JavaScript ֆրեյմվորք և մետաֆրեյմվորք համեմատեց՝ AI գործակալին խնդրելով նույն փոքր Pokemon հավելվածը կառուցել յուրաքանչյուրի հետ։ Այն չափեց արժեքի մեդիանը, ժամանակը, տոկենները, կոդի տողերը և Lighthouse արդյունավետությունն ու հասանելիությունը մի քանի վազքերի ընթացքում։ Արժեքները տատանվեցին $2.67-ից Hono և htmx տարբերակի համար մինչև $4.97 Angular-ի համար, իսկ շատ ֆրեյմվորքներ Lighthouse հասանելիության 100 միավոր ստացան։
Կառուցման արժեքն ու ջանքը
Կառուցման արժեքի մեդիանը տատանվեց $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-ի համար։ Total Blocking Time-ը տատանվեց 0 ms-ից մի քանի ֆրեյմվորքների համար մինչև 103 ms Angular-ի համար։ Largest Contentful Paint-ը տատանվեց 810 ms-ից Astro-ի համար մինչև 2090 ms Next.js-ի համար, և բենչմարքը նշում է, որ այդ չափումը հիմնականում նպաստում է բազմաէջ հավելվածներին և վնասում միաէջ հավելվածներին։
Կոդի ծավալն ու պահպանելիությունը
Ոչ դատարկ սկզբնական կոդի տողերը տատանվեցին 1370-ից Hono և htmx տարբերակի համար մինչև 2009 Angular-ի համար։ Հոդվածը մեջբերում է Rich Harris-ին. «Ֆրեյմվորքները ձեր կոդը կազմակերպելու գործիքներ չեն, այլ՝ ձեր միտքը կազմակերպելու գործիքներ»։ Այն նաև պնդում է, որ կոդի ծավալը ազդում է ապագա խմբագրման տոկենների ծախսերի վրա։ Hono և htmx տարբերակը տրամադրեց մոտավորապես նույն հավելվածը Angular-ի կոդի մոտ 70 տոկոսով և ավելի արագ Lighthouse արդյունքներով։
Զգուշացումներն ու մեթոդը
Հավելվածը համեմատաբար բովանդակության վրա հիմնված Pokemon կայք էր՝ քիչ ինտերակտիվությամբ, իսկ Lighthouse-ը և Core Web Vitals-ը կողմնակալ են միաէջ հավելվածների նկատմամբ։ Փորձարկումը օգտագործեց պաշտոնական MCP կամ հմտություններ՝ որտեղ հասանելի էին, չպահանջեց SSR կամ CSR և խուսափեց Tailwind-ից ու Bootstrap-ից։ Հեղինակը մի քանի իտերացիա կատարեց, քանի որ LLM ելքը և Lighthouse արդյունքները ստոխաստիկ են, իսկ Angular-ը երկու անգամ ձախողվեց, ուստի դրա ցուցանիշները օգտագործում են երեք վազք՝ հինգի փոխարեն։ Բենչմարքը և կոդը հասանելի են GitHub-ում։
Աղբյուրներ. nolanlawson.com
SiTech — AI-ով հզորացված վեբ մշակում
Ստեղծում ենք արագ ու ժամանակակից կայքեր և AI-ը ներդնում իրական բիզնես գործընթացներում։ Ունե՞ք նախագիծ կամ հարց։ Ուրախ կլինենք օգնել։