ბენჩმარკი ადარებს JavaScript-ის ფრეიმვორკების AI-ით აწყობის ხარჯებსა და შესრულებას

ბენჩმარკის ფარგლებში 12 JavaScript-ის ფრეიმვორკი და მეტაფრეიმვორკი შეადარეს: AI-აგენტს დაავალეს, თითოეულით ერთი და იმავე პატარა Pokemon-ის აპლიკაცია აეწყო. გაზომეს მედიანური ღირებულება, დრო, ტოკენები, კოდის ხაზები და Lighthouse-ის შესრულება და ხელმისაწვდომობა რამდენიმე გაშვების განმავლობაში. ხარჯები Hono-სა და htmx-ის კომბინაციისთვის $2,67-დან Angular-ისთვის $4,97-მდე მერყეობდა, ხოლო ფრეიმვორკების უმეტესობამ Lighthouse-ის ხელმისაწვდომობაში 100 ქულა მიიღო.

აწყობის ხარჯი და ძალისხმევა

აწყობის მედიანური ხარჯები Hono-სა და htmx-ის კომბინაციისთვის $2,67-დან Angular-ისთვის $4,97-მდე მერყეობდა. SvelteKit-ის ღირებულება $4,28 იყო, Gracile-სა და Lit-ის $4,65, Angular-ის კი $4,97, რაც ამ ვარიანტებს სხვებზე უფრო ძვირად აქცევს. ბენჩმარკის მიხედვით, SvelteKit-ის აგენტები ყოველ გაშვებაზე კითხულობდნენ SvelteKit v3-ის მიგრაციის სახელმძღვანელოს, Gracile-ის აგენტები ხშირად კლონავდნენ მის რეპოზიტორიას ან კითხულობდნენ კომპილირებულ წყაროს, ხოლო Angular-ის უფრო მაღალი ღირებულება მის უფრო დიდ კოდის ზომასთან იყო დაკავშირებული. გაშვების მედიანური დრო Astro-სთვის 8,2 წუთიდან Angular-ისთვის 17,2 წუთამდე მერყეობდა, ტოკენების მოხმარება კი Nuxt-ის შემთხვევაში 3,85 მილიონიდან Angular-ის შემთხვევაში 9,76 მილიონამდე მერყეობდა.

შესრულება და ხელმისაწვდომობა

Lighthouse-ის ხელმისაწვდომობა ყველა ფრეიმვორკისთვის 100 იყო. შესრულება 97-დან 100-მდე მერყეობდა: Vanilla-ს 97 ჰქონდა, Next.js-სა და TanStack Start-ს კი 99. გაგზავნილი JavaScript-ის ბაიტების რაოდენობა Astro-სთვის 0 KiB-დან Next.js-ისთვის 142 KiB-მდე მერყეობდა. Total Blocking Time რამდენიმე ფრეიმვორკისთვის 0 ms-დან Angular-ისთვის 103 ms-მდე მერყეობდა. Largest Contentful Paint Astro-სთვის 810 ms-დან Next.js-ისთვის 2090 ms-მდე მერყეობდა, ბენჩმარკი კი აღნიშნავს, რომ ეს მეტრიკა ზოგადად მრავალგვერდიან აპლიკაციებს აძლევს უპირატესობას და ერთგვერდიან აპლიკაციებს აზარალებს.

კოდის ზომა და შენარჩუნებადობა

არაცარიელი საწყისი კოდის ხაზების რაოდენობა Hono-სა და htmx-ისთვის 1370-დან Angular-ისთვის 2009-მდე მერყეობდა. პოსტში მოყვანილია Rich Harris-ის ციტატა: „ფრეიმვორკები თქვენი კოდის ორგანიზების ინსტრუმენტი არ არის; ისინი თქვენი გონების ორგანიზების ინსტრუმენტია.“ ასევე აღნიშნულია, რომ კოდის ზომა გავლენას ახდენს მომავალ ტოკენურ ხარჯებზე რედაქტირებისას. Hono-სა და htmx-ის კომბინაციამ დაახლოებით იგივე აპლიკაცია შექმნა Angular-ის კოდის დაახლოებით 70%-ის გამოყენებით და უფრო სწრაფი Lighthouse-ის შედეგებით.

შენიშვნები და მეთოდი

აპლიკაცია შედარებით კონტენტზე დაფუძნებული Pokemon-ის საიტი იყო მცირე ინტერაქტივობით, ხოლო Lighthouse და Core Web Vitals ერთგვერდიან აპლიკაციებს მიკერძოებულად აფასებენ. ტესტში გამოიყენეს ოფიციალური MCP ან skills, სადაც ხელმისაწვდომი იყო, SSR ან CSR სავალდებულო არ გახადეს და თავი აარიდეს Tailwind-სა და Bootstrap-ს. ავტორმა მრავალი იტერაცია გააკეთა, რადგან LLM-ის გამოსავალი და Lighthouse-ის შედეგები სტოქასტურია; Angular ორჯერ ჩავარდა, ამიტომ მისი მაჩვენებლები ხუთის ნაცვლად სამ გაშვებას ეფუძნება. ბენჩმარკი და კოდი ხელმისაწვდომია GitHub-ზე.

წყაროები: nolanlawson.com