فارسی

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

بارگذاری تنبل در ری‌اکت: تقسیم‌بندی کد کامپوننت برای بهینه‌سازی عملکرد

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

بارگذاری تنبل و تقسیم‌بندی کد چیست؟

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

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

چرا از بارگذاری تنبل و تقسیم‌بندی کد در ری‌اکت استفاده کنیم؟

در اینجا دلایلی وجود دارد که چرا باید استفاده از بارگذاری تنبل و تقسیم‌بندی کد را در پروژه‌های ری‌اکت خود در نظر بگیرید:

چگونه بارگذاری تنبل را در ری‌اکت پیاده‌سازی کنیم

ری‌اکت با استفاده از کامپوننت‌های React.lazy و Suspense پشتیبانی داخلی برای بارگذاری تنبل فراهم می‌کند. در اینجا یک راهنمای گام به گام ارائه شده است:

۱. استفاده از React.lazy()

React.lazy() به شما امکان می‌دهد تا کامپوننت‌ها را به صورت پویا ایمپورت کنید و به طور موثر کد خود را به قطعات جداگانه تقسیم کنید. این تابع یک فانکشن را به عنوان ورودی می‌گیرد که import() را فراخوانی می‌کند و یک Promise برمی‌گرداند که به کامپوننت مورد نظر resolve می‌شود.


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

در این مثال، MyComponent تنها زمانی بارگذاری می‌شود که در آستانه رندر شدن باشد.

۲. پیچیدن با <Suspense>

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


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