React Lazy Loading: افزایش عملکرد با تقسیم کد

با رشد برنامه های React ، بسته های بزرگ جاوا اسکریپت می توانند بارهای اولیه صفحه را کاهش دهند و منجر به تجربه ضعیف کاربر شوند. بارگیری تنبل تکنیکی است که با بارگیری قطعات فقط در صورت لزوم ، بهبود عملکرد و کاهش مصرف منابع غیر ضروری ، به کاهش این مسئله کمک می کند.

در این وبلاگ ، ما قابلیت های بارگذاری تنبل داخلی React و نحوه اجرای آنها را به طور مؤثر با استفاده از React کشف خواهیم کرد React.lazy وت Suspenseبشر

بارگذاری تنبل چیست؟
بارگذاری تنبل یک الگوی طراحی است که بارگذاری منابع غیر ضروری را تا زمانی که لازم باشد ، نشان می دهد. در React ، این به معنای بارگیری اجزای فقط در صورت نیاز به آنها است ، به جای اینکه آنها را در بسته اولیه JavaScript قرار دهید.

مزایای بارگذاری تنبل

• بار اولیه سریعتر: فقط اجزای اساسی در پیشرو هستند.
• اندازه بسته نرم افزاری کاهش یافته: تقسیم کد به تکه های کوچکتر باعث می شود برنامه کارآمدتر شود.
• عملکرد بهینه شده: بهبود تجربه کاربر ، افزایش تجربه کاربر را بهبود می بخشد.

اجرای بارگذاری تنبل در React

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

React عملکرد React.Lazy را برای واردات پویا به اجزای ارائه می دهد. این یک مؤلفه مبتنی بر وعده را برمی گرداند که فقط در صورت لزوم بارگیری می شود.

نمونه:

import React, { Suspense } from "react";

const lazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    

      
      Loading...
}>
        
      
    

) ؛ } برنامه پیش فرض صادرات ؛