بالا بردن کارایی با استفاده از lazy loading در react

Lazy loading یک تکنیک برای بالا بردن کارایی است که در سطح وسیعی از آن برای بالا بردن سرعت بارگزاری صفحات وب استفاده می شود . دلیل استفاده از Lazy loading بالا بردن کارایی و کاهش احتمال بروز مشکل در هنگام بارگزاری سایت هست .

در این مقاله قراره طریقه استفاده از lazy loading ، برای بالا بردن سرعت بارگزاری صفحات در react را مورد بحث قرار دهیم .

lazy loading چیست ؟

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

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

هنگامی که شما از create-react-app یا Next.js و یا gatsby استفاده می کنید کد های شما با استفاده از webpack ترکیب می شود و webpack در هنگام بارگزاری برنامه همه ی فایل ها و کامپوننت های شما را به صورت یکجا بارگزاری می کند . در مراحل اولیه تصور بر این است که برنامه خیلی سریع بارگزاری می شود ولی با حجیم شدن برنامه و اضافه شدن فایل های دیگر برنامه کارایی قبلی را از دست داده و سرعت بارگزاری آن ناخواسته کاهش می یابد برای همین توصیه شده که از lazy loading در برنامه استفاده شود . تکنیک های بسیاری برای پیاده سازی Lazy loading وجود دارد که در این مقاله قراره با یکی از آن ها آشنا شویم .

12 کامپوننت UI برای React

نکته: این قابلیت در ورژن 16.6 react قابل استفاده است .

استفاده از react.lazy

تابع react.lazy به شما این اجازه را می دهد تا به صورت داینامیک کامپوننت های خودتان را همانند یک کتابخانه معمولی وارد برنامه کنید .

برای این کار به جای استفاده از :

import OtherComponent from './OtherComponent';

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );

import OtherComponent from './OtherComponent';

function MyComponent() {

return (

<div>

</div>

);

از این کد استفاده کنید :

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

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );

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

function MyComponent() {

return (

<div>

</div>

);

برای اینکه در هنگام بارگزاری کابر متوجه شود که یک بارگزاری دیگر در حال انجام است از کامپوننت suspense استفاده می کنیم تا به کاربر یک پیغام loading نمایش دهد :

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

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

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

function MyComponent() {

return (

<div>

<Suspense fallback={<div>Loading...</div>}>

</Suspense>

</div>

);

}

پراپس fallback می تواند هر عنصری از عناصر react را بنا به خواسته شما هنگام بارگزاری به کاربر نشان دهد .

یکی از روش های Lazy loading معرفی شد و شما می توانید برای بالابردن سرعت بارگزاری سایتتان از آن استفاده کنید .تجربه هاتون رو حتما در کامنت ها به اشتراک بزارید.
اگر قصد یادگیری react(ری اکت) را به صورت حرفه ای دارید، پیشنهاد میکنم آموزش جامع و پروژه محور react را مشاهده کنید