توربوپک چطور کد جاوااسکریپت رو تیکهتیکه میکنه
فرانتاند
جاوااسکریپت
ریاکتخلاصهٔ کاملتر
توربوپک برای هر اپ Next.js دهها chunk میسازه، یعنی همون فایلهای جاوااسکریپتی که مرورگر جدا جدا دانلود میکنه، و chunking یعنی تصمیم اینکه کدوم ماژول بره تو کدوم فایل. نویسنده میگه دو تا حالت ساده جواب نمیده: یه chunk برای کل سایت کش رو عالی میکنه ولی هر صفحه کد بقیهٔ صفحهها رو هم با خودش میکشه؛ یه chunk برای هر صفحه کد اضافه نمیفرسته ولی کد مشترکی مثل فوتر تو هر صفحه دوباره دانلود میشه.
راه سوم اینه که هر ماژول یه chunk جدا باشه. اونوقت هیچی اضافه فرستاده نمیشه، ولی صدها درخواست ریز میمونه رو دست مرورگر و gzip هم روی فایلهای کوچیک بد کار میکنه چون فقط داخل یه فایل دنبال الگوی تکراری میگرده. راهحل توربوپک ادغام chunkهای کوچیکه، اما فقط داخل یه chunk group، یعنی مجموعه chunkهایی که با هم برای یه صفحه لود میشن، تا چیزی که صفحه لازم نداشته بهش تحمیل نشه.
ادغام همیشه برنده نیست. نویسنده مثال میزنه chunk فوتر که همهجا لازمه و chunk ویدیوپلیر که فقط تو صفحهٔ اصلیه؛ اگه کاربر بعدش بره صفحهای که فقط فوتر رو میخواد، فایل ادغامشده به دردش نمیخوره و همون کد رو دوباره میگیره. تست روی خود nextjs.org هم همینو نشون میده: بدون ادغام ۵۶۱.۶ کیلوبایت تو ۹۶ درخواست، با پیشفرضها ۵۵۴.۸ کیلوبایت تو ۳۸ درخواست، و با ادغام حداکثری ۶۱۰ کیلوبایت تو فقط ۱۵ درخواست.
تو Next.js 16.3 با فعالکردن experimental.turbopackChunking.generateComponentChunks توربوپک نسخهٔ ادغامنشدهٔ chunkها رو هم کنار نسخهٔ ادغامشده بیرون میده و موقع درخواست هرکدوم ارزونتر بود رو برمیداره. منطقش اینه که رانتایم برخلاف زمان build میدونه مرورگر چی رو از قبل کش کرده، پس جابهجایی بین صفحهها کد تکراری کمتری میگیره.
سه تنظیم تازه هم اضافه شده: firstPageLoadPriority با پیشفرض ۰.۶۷ وزن بین بازدید تکصفحه و چندصفحه رو جابهجا میکنه، priorityRoutes مسیرهای مهم رو راحتتر ادغام میکنه و clusters صفحههایی رو که معمولاً پشتسرهم دیده میشن کنار هم میذاره. جدا از این، tree-shaking ماژولهای CJS و یه رانتایم مشترک اومده که حدود ۱۰ کیلوبایت و یه درخواست بلاکینگ از هر ناوبری کم میکنه.
نکات کلیدی:
- روی nextjs.org تنظیمات پیشفرض درخواستها رو از ۹۶ به ۳۸ رسوند و حجم کد هم کمی کمتر شد
- ادغام حداکثری درخواستها رو تا ۱۵ تا پایین آورد ولی ۱۰ درصد کد بیشتری فرستاد
- generateComponentChunks در Next.js 16.3 انتخاب chunk رو به زمان اجرا موکول میکنه
- وزن پیشفرض بازدید تکصفحه ۰.۶۷ هست و با firstPageLoadPriority قابل تغییره
- turbopackSharedRuntime حدود ۱۰ کیلوبایت جاوااسکریپت از هر ناوبری بعدی کم میکنه
