M
MLOG
بارگذاری تنبل در ری‌اکت: تقسیم‌بندی کد کامپوننت برای بهینه‌سازی عملکرد | MLOG | MLOG ); } export default ImageGallery;

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


import React from 'react';

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

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" (یا مشابه آن) به جای یک نام عمومی ایجاد می‌کند.

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

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

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

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

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


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های جایگزین آموزنده‌ای ارائه دهید، خطاهای احتمالی را به خوبی مدیریت کنید و عملکرد اپلیکیشن خود را به دقت تجزیه و تحلیل کنید تا اطمینان حاصل کنید که به نتایج مطلوب دست می‌یابید. از آزمایش رویکردهای مختلف و یافتن بهترین راه‌حل برای نیازهای خاص خود نترسید.