همه چیز در مورد Lazy loading در ریکت و بهینه سازی عملکرد پروژه

Lazy loading یکی از رایج ترین دیزاین پترن ها در طراحی صفحات وب یا موبایل است و از آن ها به وفور ذر فریم ورک انگولار یا کتابخانه ریکت جهت افزایش پرفرمنس پروژه و کاهش زمان بارگذاری آن استفاده می‌شود.

در این مقاله میخوایم بررسی کنیم که Lazy loading چیست و استفاده از آن چه مزایا و چه معایبی می تواند داشته باشد.

Lazy loading چیست؟

بخواهم خیلی ساده بگویم، بارگذاری تنبل، نوعی دیزاین پترن است که به شما اجازه میدهد قسمت های مختلف پروژه را در صورت تقاضای کاربر به صورت جداگانه لود کنید و این باعث افزایش زمان اولیه بارگذاری صفحه میشود. به عنوان مثال، فرض کنید که کامپوننت های مربوط به صفحه لاگین یا ثبت نام را به صورت lazy فراخوانی کرده اید زمان استفاده از پروژه، در صورتی که یوزر صفحه لاگین رو انتخاب کند، باندل مربوط به این صفحه لود میشود در غیر این صورت لود نمی‌شود. در صورتی که از Lazy loading استفاده نکنید، زمان لود پروژه، کدهای مربوط به کامپوننت های ثبت نام و لاگین به صورت خودکار لود میشود هر چند اگر از آن ها استفاده ای نکنید.

شاید استفاده از این دیزاین پترن در پروژه های کوچک به چشم نیاید و زیاد تغییری در پرفورمنس پروژه احساس نکنید اما تاثیر آن در پروژه های بزرگ که حجم باندل وارد محدوده‌ی چند مگابایتی میشود بسیار می تواند ملموس و قابل درک باشد.

مزایای استفاده از Lazy loading در پروژه های ریکتی

• کاهش زمان بارگذاری صفحه و کاهش حجم باندل پروژه
• کاهش بار کاری یا اصطلاحاً Workload مرورگر
• بهبود عملکرد پروژه و فراهم کردن امکان استفاده از آن با سرعت پایین اینترنت
• بهبود تجربه کاربر به واسطه افزایش سرعت بارگذاری صفحه
• استفاده بهینه از منابع

معایب استفاده از الگوی بارگذاری تنبل

• عدم کاربرد پذیری در پروژه های کوچک
• در زمان اولیه میتواند سرعت اسکرول کردن صفحه را کاهش دهد. (به سبب منتظر ماندن تا لود شدن اجزای مورد نظر)

• می تواند بر سئو و رتبه بندی تاثیر منفی بگذارد : الگوریتم‌های جستجوگر هنوز به خوبی با lazy loading سازگار نشده‌اند و ممکن است در فهرست نتایج جستجو قابل رؤیت نباشید. در صورتی که سئوی پروژه برایتان مهم است بهتر است در قسمت های مهم پروژه از lazy loading خودداری کنید.

• وقتی که نیاز به لود تمام محتوا در یک بار است : در برخی موارد، ممکن است نیاز داشته باشید تمام محتوای صفحه را به صورت همزمان لود کنید، به عنوان مثال در صفحات فروشگاه آنلاین یا صفحات با اطلاعات جزئی و حساس که در این حالت، استفاده از lazy loading منجر به تجربه کاربری نامطلوب و عدم رضایت مشتریان خواهد شد.
• وقتی که دسترسی به اینترنت ضعیف است : در بعضی مناطق یا شرایط، سرعت اینترنت ضعیف است و لود کامل محتوا زمان زیادی را مصرف خواهد کرد. در این حالات، استفاده از lazy loading منجر به تأخیر بارگیری صفحه و عدم قابل دسترس بودن بخش‌های مورد نظر خواهد شد.
• صفحاتی که محتوای داینامیک زیادی دارند: اگر صفحه شما دارای محتوای داینامیک زیادی است که هر بار بازدید کننده باید منتظر بماند تا آن محتوا ها را دریافت شود، استفاده از lazy loading ممکن است باعث تأخیر در بارگیری محتوا و نمایش آن به کاربران شود و این خود موجب کاهش تجربه کاربر خواهد شد.

نحوه پیاده سازی Lazy Loading در ریکت

معمولاً از الگوی بارگذاری تنبل در پروژه های ریکتی استفاده نمیشود چون ما از این کتابخونه برای طراحی پروژه های تک صفحه ای استفاده می کنیم. اما اگر از این کتابخونه یا فریم ورک هایی مثل انگولار برای طراحی وب اپلیکیشن های بزرگ استفاده می کنید حتماً این دیزاین پترن مورد استفاده‌تان قرار خواهد گرفت و ما در این مقاله نحوه استفاده از این دیزاین پترن در پروژه های ریکتی را بررسی خواهیم کرد.

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

lazy یکی از تابع های لایبرری React است که به شما اجازه میدهد بتوانید به آسانی کامپوننت ها را به صورت داینامیک ایمپورت کنید و آن هم  تا زمانی به کامپوننت ایمپورت شده احتیاج ندارید آن را رندر نکند و به همین واسطه سایز باندل کاهش پیدا کرده و به سبب آن پرفرمنس و سرعت پروژه افزایش میابد.

نمونه کد:

// بدون استفاده از React.lazy()
import AboutComponent from './AboutComponent ';

// با استفاده از React.lazy()
const AboutComponent = React.lazy(() => import('./AboutComponent '));

const HomeComponent = () => (
    <div><AboutComponent /></div>

استفاده از React.Suspense

گاهی اوقات ممکن است کامپوننتی که میخواهید به صورت lazy ایمپورت کنید حجمش بالا باشد یا اینکه سرعت پاسخگویی سرور یا پهنای باند کاربر در آن زمان به اندازه ای نباشد که بتواند سریع درخواست ارسال و یا دریافت کند در نتیجه به یک Placeholder نیاز داریم که در حین ایمپورت شدن کامپوننت به کاربر نمایش دهد و چه چیزی بهتر از یک لودینگ جذاب 😀 .

با استفاده از کامپوننت Suspense میتوانید برای توابعی که به صورت lazy بارگذاری میشوند یک fallback تعریف کنید که درون این پراپرتی میتوانید از هر کامپوننتی من جمله کامپوننت لودینگ جهت نمایش استفاده کنید. برای اینکه منظورم را بهتر متوجه بشوید تکه کد زیر را بررسی کنید:

import React, { Suspense } from "react";
const AboutComponent = React.lazy(() => import('./AboutComponent'));

const HomeComponent = () => (
    <div><Suspense fallback = { <div> لطفاً صبر کنید... </div> } >
            <AboutComponent /></Suspense></div>
);

کامپوننت ErrorBoundry در ریکت

به طور کلی برای مدیریت خطا های احتمالی حین رندر شدن یک کامپوننت، میتوانید از کامپوننت ErrorBoundry استفاده کنید پس برای این منظور یک کامپوننت بسازید و نام آن را ErrorBoundry.jsx قرار بدهید سپس از تکه کد زیر را درونش قرار دهید:

class ErrorBoundary extends React.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 };  }

  render() {
    if (this.state.hasError) {      // You can render any custom fallback UI    
  return <h1>خطایی رخ داده است لطفاً مجدداً تلاش کنید.</h1>;    }
    return this.props.children; 
  }
}
export default ErrorBoundary;

حال که کامپوننت ErrorBoundry را ساختید می توانید از آن جهت مدیریت خطا حین بارگذاری کامپوننت ها من جمله کامپوننت های lazy شده استفاده کنید و کد مربوط به ایمپورت کردن کامپوننت lazy شده به صورت زیر تغییر خواهد کرد:

import React, { Suspense } from "react";
import ErrorBoundary from "./ErrorBoundry";
const AboutComponent = React.lazy(() => import('./AboutComponent'));

const HomeComponent = () => (
    <div><ErrorBoundary>
        <Suspense fallback = { <div> لطفاً صبر کنید... </div>} >
          <AboutComponent /></Suspense></ErrorBoundary>
    </div>
);

زیاد از دیزاین پترن Lazy Loading استفاده نکنید !!!

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

هیچوقت برای پروژه هایی که دارای باندل خیلی کوچک هستند از پترن بارگذاری تنبل استفاده نکنید چرا که تاثیر زیادی در عملکرد پروژه ندارد و فقط زمان برنامه نویسی را افزایش می دهد.

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

البته این موضوع را فراموش نکنیم که این پترن در پروژه های بزرگ بسیار میتواند باعث افزایش پرفرمنس پروژه بشود پس نتیجتاً میشود گفت که قبل از اینکه پروژه را استارت بزنید اندکی در مورد اسکیل پروژه برنامه ریزی داشته باشید.

و در آخر نکته ای مهم:

React.lazy و Suspense در پروژه های سرور SSR (سرور ساید رندرینگ) قابل استفاده نیست برای استفاده از این پترن در چنین پروژه هایی پیشنهاد میشود از پکیج Loadable Components  استفاده کنید.

نتیجه گیری

استفاده از lazy loading در موارد زیر مناسب است:

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

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