هوش مصنوعی چقدر هزینه میکند؟ بنچمارک واقعی فریمورکها برای ساختن پروژه با ایجنت
نویسنده: آرش لطیفی
نولان لوسون یک اپ پوکمون رو ۵ بار با هر فریمورک به Claude سپرد و هزینه، توکن، زمان و خروجی Lighthouse رو اندازه گرفت. نتیجهها رو خلاصه کردیم برای تصمیم پروژه بعدیات.
TL;DR — بنچمارک جدید نولان لوسون نشون داد با ایجنتها، فریمورک سبک و شناختهشده (مثل Astro و Hono+htmx) از Angular و SvelteKit ارزونتر و سریعتر ساخته میشه؛ اما تفاوت اصلی در حجم جاوااسکریپت ارسالی به کاربر و LCP هست، نه در هزینه ساخت.
وقتی با ایجنت کد میزنی، دیگه «تجربه توسعهدهنده» (DX) اون فریمورک بهانهی خوبی برای انتخاب نیست — چون کد رو ایجنت میزنه، نه تو. نولان لوسون (مهندس سابق مایکروسافت و حالا توی تیم وب WebView) همین سوال رو جدی گرفت و یه بنچمارک ساخت: یه اپ پوکمون با PokéAPI رو به Claude Opus 5.5 داد، با هر فریمورک ۵ بار از نو ساخت، و خروجی رو با تست انطباق + Lighthouse سنجید. نتیجهها (میانهی ۵ اجرا):
| معیار | بهترینها | ضعیفترین | تفاوت کلیدی | |---|---|---|---| | هزینه هر اجرا | Hono+htmx $2.67 | Angular $4.97 | حدود ۸۶٪ گرونتر | | زمان هر اجرا | Astro 8.2 دقیقه | Angular 17.2 دقیقه | بیش از ۲ برابر | | توکن هر اجرا | Nuxt 3.85M | Angular 9.76M | حدود ۲.۵ برابر | | حجم JS به کلاینت | Astro 0 KiB | Next.js 142 KiB | ۱۴۲ برابر | | LCP موبایل | Astro 810ms | Next.js 2090ms | ۲.۵ برابر کندتر |
چرا Angular گرونتر از همه تموم شد؟
نکتهی جالب اینه که ارزونترین گزینهها همون فریمورکهایی بودن که یا کم کد تولید میکنن یا توی دادههای آموزشی مدل خوب شناختهشدهان. سه دلیل مشخص برای وضعیت Angular:
- حجم کد: ۲۰۰۹ خط در مقابل ۱۳۷۰ خط Hono+htmx — حدود ۷۰٪ کد بیشتر. و کد بیشتر یعنی توکن بیشتر، نه فقط برای ساخت بلکه برای هر ویرایش آینده.
- خطای ایجنت: در ۲ اجرا از ۵، ایجنت یه اپ SSR ساخت که درخواستهای non-localhost رو رد میکرد و اصلاً اپ قابل اندازهگیری نبود.
- MPAهای ساده (Astro، Hono+htmx) چون HTML مستقیم میفرستن، سریعتر و ارزونتر ساخته میشن.
نولان به نقل از Rich Harris یادآوری میکنه: «فریمورکها ابزار سازماندهی کد نیستن؛ ابزار سازماندهی ذهنن.» توی عصر ایجنت این یعنی حجم کد مستقیماً هزینهی توکن و نگهداری رو تعیین میکنه.
ولی یه هشدار مهم: این بنچمارک اپ محتوایی بود
اپ تست یه لیست پوکمون با سرچ و فیلتر بود — بیشتر شبیه ویکیپدیا تا فیگما. اسکربل توی بحث HN درست میگه: Astro اینجا خوب امتیاز گرفت چون برای سایت محتوامحور ساخته شده. اگه اپت realtime و اینتراکشن سنگین داره، نتیجه ممکنه فرق کنه.
همچنین Lighthouse و Core Web Vitals ذاتاً به SPAها بیزاری، پس TBT و حجم JS طبیعتاً به نفع MPAهاست. چند نفر توی کامنتها گفتن ایجنتها با ترکیب Astro + React گاهی گیج میشن و مرز بین دو تا رو بد درک میکنن — پس «Astro برای همهچیز» هم جواب نیست.
نکات کاربردی برای وقتی ایجنت برات کد میزنه
- [ ] اگه سایتت محتوامحوره (بلاگ، لندینگ، فروشگاه)، MPA یا فریمورک کم-JS جدی بگیر — تفاوت LCP واقعیه، نه تبلیغاتی.
- [ ] بعد از هر سشن ایجنت، حجم JS و LCP رو با Lighthouse چک کن؛ در بنچمارک، یه اپ Next.js فقط چون lazy-load تصویر رو یادش رفته بود، LCP پرتاب شد.
- [ ] فریمورکی انتخاب کن که توی دادههای آموزشی مدل خوب حاضره — SvelteKit گرون شد چون ایجنت هر بار راهنمای مهاجرت v3 رو میخوند.
- [ ] حجم کد رو جدی بگیر؛ هر خط اضافه یعنی هزینهی بیشتر برای هر ویرایش بعدی.
- [ ] MCP و skillهای رسمی هر فریمورک رو نصب کن، ولی انتظار جادو نداشته باش — توی همین بنچمارک، MCP نuxt هیچوقت استفاده نشد و skill فایل Next.js فقط توی ۱ اجرا از ۵ خونده شد.
چند عدد که باید حواست باشه
این بنچمارک هزینهی API کلود رو گزارش میکنه، نه هزینهی واقعی نویسنده — اون روی پلن Max بوده. همچنین همهچیز تصادفیه (stochastic): مدلها گاهی گیر میکنن و توکن حروم میکنن بی ربط به فریمورک. نولان با ۵ اجرا و گزارش میانه و بازه، سعی کرده واریانس رو صادقانه نشون بده. پس این اعداد رو به عنوان «روند» بخون، نه «قانون».
و یه نکتهی امیدوارکننده: امتیاز Performance و Accessibility و CLS تقریباً برای همهی فریمورکها عالی بود (۹۷ تا ۱۰۰). یعنی فرقی نمیکنه چی انتخاب کنی، اگه ایجنتت کار رو درست انجام بده، خروجی از نظر CWV مشکلی نداره — تفاوت واقعی توی هزینه و حجم جاوااسکریپته.
Q: یعنی باید پروژه Next.js رو ول کنم برم سراغ Astro؟
نه لزوماً. این بنچمارک اپ محتوامحور بود. اگه اپت اینتراکشن و state سنگین داره، Next.js یا SvelteKit همچنان منطقیه. ولی اگه سایتت بیشتر محتواست (مثل بلاگ و فروشگاه)، تفاوت LCP و حجم JS واقعاً معناداره.
Q: این هزینهها برای من هم همینه؟
به توکنهای مدل خودت بستگی داره. اعداد، هزینهی API مستقیم Claude Opus 5.5 با effort بالا بودن. با مدل ارزونتر یا پلن اشتراکی، مطلقش فرق میکنه ولی نسبت بین فریمورکها تقریباً همینه — Angular همیشه بالای جدوله.
Q: Vanilla (بدون فریمورک) چی؟ چرا خوب نشد؟
جالبه که Vanilla با Vite بدتر از چند فریمورک عمل کرد — ایجنت همهی ۵ بار یه SPA ساخت و LCP اون تا ۱۶۶۷ms رفت. یعنی یه فریمورک خوب حتی برای ایجنت هم بهتر از «هیچی» است.