02- Code Splitting استراتژیها (Route-based, Component-based)

پاسخ پیشنهادی (برای بیان در مصاحبه):

۱. تعریف کلی (جلب توجه مصاحبهگر):

«Code Splitting یعنی به جای اینکه کل برنامه را یک جا به کاربر بفرستیم، آن را به چند تکه کوچکتر تقسیم میکنیم و فقط همان چیزی را میفرستیم که کاربر در همان لحظه به آن نیاز دارد. این کار باعث میشود صفحه اول خیلی سریعتر بارگذاری شود.»

۲. استراتژی اول: Route-based Splitting (مهمترین و رایجترین)

«در این روش، براساس آدرسهای برنامه (صفحات) کد را تقسیم میکنیم. مثلاً وقتی کاربر وارد صفحه «داشبورد» میشود، کد مربوط به صفحه «تنظیمات» را اصلاً دریافت نمیکند. در Next.js این کار به صورت پیشفرض با استفاده از ساختار pages یا app انجام میشود. یعنی هر صفحه، یک chunk مجزا دارد.»

مثال عملی در Next.js:

javascript

// در Next.js، خودِ سیستم این کار را میکند
// اما اگر بخواهیم دستی در React پیاده کنیم:

const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings = React.lazy(() => import('./pages/Settings'));

// حالا وقتی کاربر به /dashboard میرود، فقط Dashboard بارگذاری میشود

۳. استراتژی دوم: Component-based Splitting (جزئی تر و هوشمندانه تر)

«اینجا دیگر براساس صفحه نیست، بلکه براساس کامپوننت های سنگین یا کم استفاده تقسیم میکنیم. مثلاً یک مودال بزرگ، یک چارت سنگین یا یک ویرایشگر متن که شاید اصلاً همه کاربران از آن استفاده نکنند. این کامپوننت را فقط وقتی بارگذاری میکنیم که کاربر واقعاً به آن نیاز داشته باشد (مثلاً با کلیک دکمه).»

مثال عملی:

javascript

// بارگذاری یک کامپوننت سنگین فقط هنگام کلیک
const HeavyChart = React.lazy(() => import('./HeavyChart'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button ={() => setShowChart(true)}>نمایش نمودار</button>
      {showChart && (
        <Suspense fallback={<div>در حال بارگذاری...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

۴. تفاوت کلیدی این دو استراتژی (نکته طلایی برای تمایز):

Route-basedComponent-basedدر سطح صفحه در سطح کامپوننت هنگام تغییر آدرس هنگام رویداد (مثل کلیک)بیشتر برای LCP مفید است بیشتر برای تعاملات ثانویه مفید است در Next.js پیشفرض است باید با dynamic import پیاده سازی کنیم

۵. نکته پیشرفته تر (برای نشان دادن دانش عمیق):

«در Next.js میتوانیم با استفاده از next/dynamic کنترل بیشتری داشته باشیم. مثلاً میتوانیم مشخص کنیم که یک کامپوننت فقط در سمت کلاینت بارگذاری شود (برای کتابخانههایی که با SSR مشکل دارند) یا اینکه در حین بارگذاری، یک حالت Loading نمایش دهیم.»

javascript

import dynamic from 'next/dynamic';

const DynamicChart = dynamic(
  () => import('../components/HeavyChart'),
  { 
    ssr: false, // فقط کلاینت
    loading: () => <p>در حال بارگذاری نمودار...</p>
  }
);

۶. جمع بندی نهایی (با نگاه مهندسی):

«انتخاب استراتژی به این بستگی دارد که بزرگترین مشکل عملکردی ما چیست. اگر صفحه اول کند است → Route-based. اگر تعاملات داخلی کند است → Component-based. در پروژه های بزرگ معمولاً از ترکیب هر دو استفاده میکنیم. همچنین با ابزارهایی مثل @next/bundle-analyzer مدام سایز باندل را چک میکنیم تا مطمئن شویم که تقسیمبندی درست کار کرده است.»

نکات اضافه برای مصاحبه (اگر سوال عمقی پرسیدند):

• ابزارهای مکمل: Webpack (با SplitChunksPlugin)، @next/bundle-analyzer

• چالشها: مدیریت حالت Loading با Suspense، جلوگیری از Flicker (پرش صفحه)

• معیار موفقیت: کاهش First Load JS در گزارش Lighthouse