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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...

در این مثال، پیام Loading... در حین بارگذاری MyComponent نمایش داده می‌شود. پس از بارگذاری کامپوننت، جایگزین UI جایگزین خواهد شد.

۳. مثال عملی: بارگذاری تنبل یک گالری تصاویر بزرگ

سناریویی را در نظر بگیرید که در آن یک گالری تصاویر بزرگ دارید. بارگذاری همه تصاویر به یک‌باره می‌تواند به طور قابل توجهی بر عملکرد تأثیر بگذارد. در اینجا نحوه بارگذاری تنبل تصاویر با استفاده از React.lazy() و <Suspense> آمده است:

import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Image 1' },
    { id: 2, src: 'image2.jpg', alt: 'Image 2' },
    { id: 3, src: 'image3.jpg', alt: 'Image 3' },
    // ... more images
  ];

  return (
    

      {images.map(image => (
        Loading image...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

و کامپوننت Image.js:

import React from 'react';

const Image = ({ src, alt }) => {
  return ;
};

export default Image;

در این مثال، هر تصویر در یک کامپوننت <Suspense> پیچیده شده است، بنابراین یک پیام بارگذاری برای هر تصویر در حین بارگذاری آن نمایش داده می‌شود. این کار از مسدود شدن کل صفحه در حین دانلود تصاویر جلوگیری می‌کند.

تکنیک‌های پیشرفته و ملاحظات

۱. مرزهای خطا (Error Boundaries)

هنگام استفاده از بارگذاری تنبل، مدیریت خطاهای احتمالی که ممکن است در طول فرآیند بارگذاری رخ دهند، مهم است. از مرزهای خطا می‌توان برای گرفتن این خطاها و نمایش یک UI جایگزین استفاده کرد. شما می‌توانید یک کامپوننت مرز خطا مانند این ایجاد کنید:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

سپس کامپوننت <Suspense> را با <ErrorBoundary> بپیچید:

  Loading...}>
    
  

اگر خطایی در حین بارگذاری MyComponent رخ دهد، <ErrorBoundary> آن را گرفته و UI جایگزین را نمایش می‌دهد.

۲. رندر سمت سرور (SSR) و بارگذاری تنبل

بارگذاری تنبل همچنین می‌تواند در ترکیب با رندر سمت سرور (SSR) برای بهبود زمان بارگذاری اولیه اپلیکیشن شما استفاده شود. با این حال، به برخی تنظیمات اضافی نیاز دارد. شما باید اطمینان حاصل کنید که سرور می‌تواند ایمپورت‌های داینامیک را به درستی مدیریت کند و کامپوننت‌های بارگذاری‌شده به صورت تنبل به درستی در سمت کلاینت هیدراته (hydrate) شوند.

ابزارهایی مانند Next.js و Gatsby.js پشتیبانی داخلی برای بارگذاری تنبل و تقسیم‌بندی کد در محیط‌های SSR فراهم می‌کنند و این فرآیند را بسیار آسان‌تر می‌سازند.

۳. پیش‌بارگذاری کامپوننت‌های با بارگذاری تنبل

در برخی موارد، ممکن است بخواهید یک کامپوننت با بارگذاری تنبل را قبل از اینکه واقعاً مورد نیاز باشد، پیش‌بارگذاری کنید. این می‌تواند برای کامپوننت‌هایی که به زودی رندر خواهند شد، مانند کامپوننت‌هایی که در پایین صفحه قرار دارند اما احتمالاً با اسکرول کردن به نمایش در می‌آیند، مفید باشد. شما می‌توانید یک کامپوننت را با فراخوانی دستی تابع import() پیش‌بارگذاری کنید:

import('./MyComponent'); // Preload MyComponent

این کار بارگذاری کامپوننت را در پس‌زمینه آغاز می‌کند، بنابراین زمانی که واقعاً رندر می‌شود، سریع‌تر در دسترس خواهد بود.

۴. ایمپورت‌های داینامیک با کامنت‌های جادویی وب‌پک

«کامنت‌های جادویی» وب‌پک راهی برای سفارشی‌سازی نام‌های قطعات کد تولید شده فراهم می‌کنند. این می‌تواند برای اشکال‌زدایی و تجزیه و تحلیل ساختار باندل اپلیکیشن شما مفید باشد. برای مثال:

const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

این کار یک قطعه کد به نام "my-component.js" (یا مشابه آن) به جای یک نام عمومی ایجاد می‌کند.

۵. اجتناب از اشتباهات رایج

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

مثال‌های دنیای واقعی و موارد استفاده

بارگذاری تنبل می‌تواند در طیف گسترده‌ای از سناریوها برای بهبود عملکرد اپلیکیشن‌های ری‌اکت به کار رود. در اینجا چند مثال آورده شده است:

• وب‌سایت‌های تجارت الکترونیک: بارگذاری تنبل تصاویر محصولات، ویدیوها و توضیحات دقیق محصولات می‌تواند زمان بارگذاری اولیه صفحات محصول را به طور قابل توجهی بهبود بخشد.
• وبلاگ‌ها و وب‌سایت‌های خبری: بارگذاری تنبل تصاویر، ویدیوهای تعبیه‌شده و بخش‌های نظرات می‌تواند تجربه خواندن را بهبود بخشد و نرخ پرش (bounce rate) را کاهش دهد.
• داشبوردها و پنل‌های ادمین: بارگذاری تنبل نمودارها، گراف‌ها و جداول داده پیچیده می‌تواند پاسخ‌دهی داشبوردها و پنل‌های ادمین را بهبود بخشد.
• اپلیکیشن‌های تک‌صفحه‌ای (SPAs): بارگذاری تنبل مسیرها و کامپوننت‌ها می‌تواند زمان بارگذاری اولیه SPAها را کاهش داده و تجربه کاربری کلی را بهبود بخشد.
• اپلیکیشن‌های بین‌المللی: بارگذاری منابع مختص هر منطقه (متن، تصاویر و غیره) تنها زمانی که برای زبان کاربر نیاز است. به عنوان مثال، بارگذاری ترجمه‌های آلمانی برای کاربری در آلمان و ترجمه‌های اسپانیایی برای کاربری در اسپانیا.

مثال: وب‌سایت تجارت الکترونیک بین‌المللی

یک وب‌سایت تجارت الکترونیک را تصور کنید که محصولات را در سراسر جهان می‌فروشد. کشورهای مختلف ممکن است ارزها، زبان‌ها و کاتالوگ‌های محصولات متفاوتی داشته باشند. به جای بارگذاری تمام داده‌ها برای همه کشورها در ابتدا، می‌توانید از بارگذاری تنبل برای بارگذاری داده‌های مختص مکان کاربر تنها زمانی که از سایت بازدید می‌کند، استفاده کنید.

const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Function to determine user's country

  return (
    Loading content for your region...}>
      
      
    
  );
}

نتیجه‌گیری

بارگذاری تنبل و تقسیم‌بندی کد کامپوننت تکنیک‌های قدرتمندی برای بهینه‌سازی عملکرد اپلیکیشن‌های ری‌اکت هستند. با بارگذاری کامپوننت‌ها تنها زمانی که به آن‌ها نیاز است، می‌توانید زمان بارگذاری اولیه را به طور قابل توجهی کاهش دهید، تجربه کاربری را بهبود بخشید و سئوی خود را تقویت کنید. کامپوننت‌های داخلی ری‌اکت، React.lazy() و <Suspense>، پیاده‌سازی بارگذاری تنبل را در پروژه‌های شما آسان می‌کنند. این تکنیک‌ها را برای ساخت اپلیکیشن‌های وب سریع‌تر، پاسخ‌گوتر و جذاب‌تر برای مخاطبان جهانی به کار بگیرید.

به یاد داشته باشید که همیشه هنگام پیاده‌سازی بارگذاری تنبل، تجربه کاربری را در نظر بگیرید. UIهای جایگزین آموزنده‌ای ارائه دهید، خطاهای احتمالی را به خوبی مدیریت کنید و عملکرد اپلیکیشن خود را به دقت تجزیه و تحلیل کنید تا اطمینان حاصل کنید که به نتایج مطلوب دست می‌یابید. از آزمایش رویکردهای مختلف و یافتن بهترین راه‌حل برای نیازهای خاص خود نترسید.