🧩 code splitting concept

یک مفهومی که توی بحث performance زیاد مطرح میشه همین code splitting هستش که برای خودم یکم زیاد واضح نبود برای همین تصمیم گرفتم دربارش بخوونم خیلی خلاصه وار اینجا توضیح بدم

برای اینکه اصلا بفهمیم این مفهوم چیه باید بگیم 📦 Bundling چیه اول :
در یک پروژه‌ی فرانت‌اند، معمولاً کدها به فایل‌های زیادی تقسیم می‌شن، وقتی این فایل‌ها رو به سرور می‌فرستیم و کاربر می‌خواد وب‌سایت ما رو باز کنه، مرورگر باید همه‌ی این فایل‌ها رو دانلود کنه تا بتونه صفحه رو کامل و درست نمایش بده. برای اینکه همه‌ی این فایل‌ها به صورت یکجا و بهینه به کاربر برسه، از فرآیندی به نام باندلینگ (Bundling) استفاده می‌کنیم. ابزارهایی مثل Webpack به ما کمک می‌کنن تا کدهای پروژه رو در قالب یک یا چند فایل بزرگ‌تر (به نام باندل) به مرورگر ارسال کنیم. این باندل شامل تمام فایل‌ها و وابستگی‌های پروژه می‌شه که به یک مجموعه‌ی قابل اجرا تبدیل می‌شن.
💡چرا باندلینگ مهمه؟
باندلینگ به ما کمک می‌کنه تا:

• تعداد درخواست‌ها به سرور رو کاهش بدیم: با ترکیب چندین فایل به یک یا چند باندل، تعداد درخواست‌های HTTP کم‌تر می‌شه، که این باعث بهبود زمان بارگذاری (load time) می‌شه.
• بهینه‌سازی برای مرورگر: باندلرها کدها رو بهینه می‌کنن؛ مثلاً با حذف فضای خالی (minification)، کدهای بلااستفاده (tree shaking) و فشرده‌سازی.

فرض کنید یک باندل خیلی بزرگ داریم که کل پروژه داخلشه. هر بار که کاربر صفحه‌ی ما رو باز می‌کنه، باید کل باندل دانلود بشه، حتی اگه فقط بخشی از اون لازم باشه، باید چه کنیم ؟ اینجاست که Code Splitting وارد می‌شه.

🎯 حالا Code Splitting چیه؟

در واقع Code Splitting تکنیکی هست که باهاش کدهای پروژه به بخش‌های کوچیک‌تر و مستقل به اسم chunk تقسیم می‌شه که این درواقع شامل کد های خود برنامه و هر گونه وابستگی های جانبی (third-party dependencies) میشه. این روش کمک می‌کنه تا فقط همون بخش‌هایی از کد لود بشه که کاربر نیاز داره ببینه یا استفاده کنه. مثلاً وقتی یک وب‌سایت چندین صفحه یا کامپوننت داره، لازم نیست همه‌ی کدها از همون اول لود بشن و می‌تونیم بخش‌های غیرضروری رو نگه داریم تا وقتی کاربر به اون صفحه یا کامپوننت خاص میره، اون کدها بارگذاری بشن.
این تکنیک بیشتر برای بهبود Performance و بهینه‌سازی تجربه کاربری استفاده می‌شه. با کاهش حجم کد اولیه‌ای که به مرورگر فرستاده می‌شه، زمان لود صفحات کاهش پیدا می‌کنه و به همین دلیل
Largest Contentful Paint (LCP) و Time to Interactive (TTI) بهبود پیدا می‌کنه.

• بهبود سرعت بارگذاری اولیه: چون کاربر نیازی به کل کد پروژه نداره، فقط بخش‌های ضروری لود می‌شن.
• کاهش مصرف منابع: این کار منابع سیستم کاربر رو کمتر مصرف می‌کنه و تجربه بهتری فراهم می‌کنه.

📂 انواع روش‌های Code Splitting

کد اسپلیتینگ در جاوا اسکریپت مدرن و به‌خصوص در Webpack، رایج‌ترین ابزار باندلینگ در فرانت‌اند، به چندین روش مختلف قابل پیاده‌سازی هست:

• روش Entry Points: با تعیین چندین Entry Point در تنظیمات باندلر (مثل Webpack)، می‌شه بخش‌های مختلفی از پروژه رو جداگانه باندل کرد. این روش برای پروژه‌های چند صفحه‌ای (multi-page applications) بسیار کاربردیه.
• (ایمپورت داینامیک) Dynamic Imports: استفاده از import() به صورت دینامیک، یکی از ساده‌ترین و کاربردی‌ترین روش‌ها برای پیاده‌سازی Code Splitting هست. این روش، به باندلر می‌گه که کد مورد نظر رو به یک فایل جداگانه تبدیل کنه و فقط وقتی که نیاز بود، اون فایل رو دانلود کنه.

• استفاده از React.lazy و Suspense در ریکت: در ریکت، از React.lazy و Suspense می‌تونیم برای اسپلیت کردن کامپوننت‌ها استفاده کنیم. این به ما اجازه می‌ده که هر کامپوننت رو به صورت جداگانه لود کنیم و فقط وقتی کاربر به اون بخش از صفحه میره، کدش دانلود بشه.

• (کد اسپلیتینگ بر اساس مسیر) Route-based Splitting: در برنامه‌های تک‌صفحه‌ای یا همون
  (Single Page Applications - SPAs)، یکی از موثرترین روش‌ها برای اسپلیت کردن کدها، تقسیم اون‌ها بر اساس مسیرهای مختلفه. مثلاً هر مسیر اصلی می‌تونه کامپوننت‌ها و استایل‌های خودش رو به صورت مستقل داشته باشه و فقط وقتی به اون مسیر رفتیم، دانلود بشه.

📈 نتیجه‌گیری نهایی

با استفاده‌ی درست از Code Splitting می‌تونید:

• حجم کدهای ارسالی به مرورگر رو کاهش بدید
• تجربه کاربری بهتری ایجاد کنید
• و هزینه‌های لود و پردازش کد رو بهینه کنید

این تکنیک برای پروژه‌های بزرگ و پیچیده بسیار مهمه، و در ترکیب با استراتژی‌های دیگه مثل Lazy Loading، Tree Shaking و Prefetching می‌تونه تفاوت زیادی در عملکرد و کارایی پروژه ایجاد کنه.

امیدوارم مفید بوده باشه ✌️❤️