בנצ'מרק: עלויות בנייה בסיוע AI וביצועי מסגרות JavaScript
בנצ'מרק בנה אפליקציית 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, ורוב המסגרות קיבלו 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 ms בכמה מסגרות ל-103 ms ב-Angular. ה-Largest Contentful Paint נע בין 810 ms ל-Astro ל-2090 ms ל-Next.js, והבנצ'מרק מציין שהמדד נותן בדרך כלל יתרון לאפליקציות מרובות עמודים ומעניש אפליקציות של עמוד יחיד.
גודל הקוד ותחזוקתיות
שורות הקוד המקוריות שאינן ריקות נעו בין 1370 ל-Hono עם htmx ל-2009 ל-Angular. הפוסט מצטט את ריץ' האריס: "מסגרות אינן כלים לארגון הקוד שלכם; הן כלים לארגון הראש שלכם." הוא גם טוען שגודל הקוד משפיע על עלויות הטוקנים בעתיד בעת עריכה. Hono עם htmx סיפקה אפליקציה דומה בקירוב עם כ-70 אחוזים מהקוד של Angular ותוצאות Lighthouse מהירות יותר.
הסתייגויות ושיטה
האפליקציה הייתה אתר Pokemon מבוסס תוכן יחסית עם מעט אינטראקטיביות, ו-Lighthouse ו-Core Web Vitals מוטים לרעת אפליקציות של עמוד יחיד. הבדיקה השתמשה ב-MCP או בכלי skills הרשמיים היכן שהיו זמינים, לא חייבה SSR או CSR, ונמנעה מ-Tailwind ומ-Bootstrap. המחבר הריץ מספר איטרציות משום שפלט מודל השפה ותוצאות Lighthouse סטוכסטיים, ו-Angular נכשלה פעמיים, ולכן הנתונים שלה מבוססים על שלוש הרצות במקום חמש. הבנצ'מרק והקוד זמינים ב-GitHub.
מקורות: nolanlawson.com
SiTech — פיתוח אתרים בכוח ה-AI
אנחנו בונים אתרים מהירים ומודרניים ומשלבים AI בתהליכי עבודה אמיתיים. יש לכם פרויקט או שאלה? נשמח לעזור.