💡 Dynamic Import در React چیه و چرا مهمه؟

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

چطوری کار می‌کنه؟

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<LoadingSpinner />}>
  <LazyComponent />
</Suspense>

🎯 کاربردها:

• کاهش حجم bundle اولیه → لود سریع‌تر صفحه

• Route-based splitting → هر صفحه فقط وقتی کاربر رفت اونجا لود میشه

• Conditional load → مودال‌ها و بخش‌های سنگین فقط موقع نیاز

⚡ نکات مهم:

• همیشه با Suspense استفاده کنید

• fallback می‌تونه Skeleton loading یا Spinner باشه

• برای خطاها از Error Boundary استفاده کنید

💡 مثال عملی:

// مودال فقط وقتی کاربر کلیک کرد لود میشه
const handleClick = async () => {
  const Modal = await import('./HeavyModal');
  // نمایش مودال
};

این کار باعث میشه:

• کاهش حجم اولیه

• بهبود Lighthouse score

• تجربه کاربری روان‌تر

⚠️ فقط کامپوننت‌های سنگین رو lazy کنید، زیاده‌روی نکنید.