𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

بارگذاری تنبل (Lazy Loading) در React

اپلیکیشن‌های بزرگ React باندل‌های جاوااسکریپت حجیمی ایجاد می‌کنند. باندل‌های حجیم باعث کند شدن سایت شما می‌شوند. کاربران برای تعامل با اپلیکیشن شما زمان بیشتری منتظر می‌مانند. این موضوع به تجربه کاربری شما آسیب می‌زند.

بارگذاری تنبل (Lazy Loading) این مشکل را حل می‌کند. این روش کامپوننت‌ها را تنها زمانی که کاربران به آن‌ها نیاز دارند، بارگذاری می‌کند. با این کار، دیگر همه چیز را به صورت یکجا بارگذاری نمی‌کنید.

مزایای بارگذاری تنبل:

• اندازه باندل اولیه کوچک‌تر
• بارگذاری سریع‌تر صفحات
• تجربه کاربری بهتر
• مصرف پهنای باند کمتر
• بهبود Core Web Vitals

نحوه استفاده از React.lazy() ری‌اکت تابعی به نام lazy() را برای وارد کردن پویا (dynamic import) کامپوننت‌ها فراهم می‌کند. ری‌اکت کد را تنها زمانی دانلود می‌کند که بخواهد آن کامپوننت را رندر کند.

کد نمونه:

import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

شما باید از Suspense در کنار کامپوننت‌های lazy استفاده کنید. Suspense در حالی که کامپوننت در حال بارگذاری است، یک رابط کاربری جایگزین (fallback UI) را نمایش می‌دهد.

کد نمونه:

import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

دو قانون برای موفقیت:

• کامپوننت‌های شما باید از default export استفاده کنند.
• دستورات import برای حالت lazy را خارج از توابع کامپوننت خود تعریف کنید.

آیا در پروژه‌های خود از بارگذاری تنبل استفاده می‌کنید؟ در پایین نظر خود را بنویسید. من به شما پاسخ خواهم داد.

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk