راهنمای بارگذاری تنبل با React

معرفی

هنگام توسعه برنامه‌های بزرگ React، ما معمولاً از تصاویر و ویدیوهای زیادی استفاده می‌کنیم، بسته‌ها/کتابخانه‌های شخص ثالث را نصب می‌کنیم، تماس‌های API برقرار می‌کنیم و کارهای مختلف دیگری را انجام می‌دهیم. این به طور طبیعی زمان بارگیری برنامه ما را افزایش می‌دهد و منجر به یک اندازه بزرگ بسته می‌شود که به تجربه کاربری ضعیف کمک می‌کند. آنجاست بارگیری تنبل سر جایش می آید. ما را قادر می سازد تا محتوا را بارگذاری کنیم فقط در زمان، درست قبل از اینکه در برنامه نمایش داده شود.

ما می‌توانیم از بارگذاری پیش‌بارگذاری محتوا در زمانی که هنوز در معرض دید نیست، اجتناب کنیم و تمام منابع را روی محتوایی که در نمای مشاهده می‌شود متمرکز کنیم.

در این راهنما، نحوه استفاده را بررسی خواهیم کرد React.lazy() و React.Suspense برای پیاده سازی قابلیت بارگذاری تنبل و تقسیم کد که به ما امکان می دهد بدون نیاز به نصب کتابخانه های اضافی، تقسیم کد را مدیریت کنیم.

Lazy Loading چیست؟

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

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

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

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

به طور خلاصه، بارگذاری تنبل به ما امکان می دهد اجزا یا عناصر را بر اساس تقاضا ارائه دهیم، برنامه ما را کارآمدتر می کند و تجربه کاربری بهتری را ارائه می دهد.

توجه داشته باشید: اپلیکیشن های تک صفحه ای (SPA) به گونه ای طراحی شده اند که شامل تمام صفحات و محتوا در یک سند/صفحه واحد باشد. به همین دلیل است که بارگذاری تنبل به ویژه هنگام توسعه SPA مفید است.

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

تا اینجا، ما دیدیم که بارگذاری تنبل چیست و چرا اجرای آن مهم است. حال، بیایید ببینیم چگونه می‌توانیم آن را در برنامه‌های React خود پیاده‌سازی کنیم، با استفاده از دو ویژگی React که پیاده‌سازی کدها و بارگذاری تنبل را آسان می‌کند. React.lazy() و واکنش نشان دهید. تعلیق.

React.lazy() تابعی است که به ما امکان می دهد رندر کنیم واردات پویا مانند اجزای معمولی. استفاده از واردات پویا در کنار React.lazy() ما را قادر می‌سازد تا یک کامپوننت را درست قبل از نمایش آن روی صفحه وارد کنیم. نکته مهمی که باید به آن توجه کرد این است React.lazy() تابعی را به عنوان آرگومان می پذیرد - آن تابع باید پویا را فراخوانی کند import() در بدن آن

React.Suspense ما را قادر می سازد تا بک گراند را مشخص کنیم طرفدار که در یک محتوای نگهدارنده قرار می گیرد که به عنوان یک مورد استفاده می شود نشانگر بارگذاری در حالی که تمام اجزای تنبل بارگذاری می شوند.

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

شروع شدن

فرض کنید برنامه React خود را داریم و آن را وارد کرده ایم About جزء به Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

ما اکنون می توانیم با استفاده از بارگذاری تنبل را پیاده سازی کنیم React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

توجه داشته باشید: React.lazy() از این طریق استفاده شده است Promise هدف - شی. این وعده به ماژولی حل می شود که حاوی یک جزء React است که می خواهیم در آن بارگذاری شود default صادرات

ما بارگذاری تنبل را با استفاده از آن پیاده سازی کرده ایم React.lazy()، اما کد بالا همیشه یک را پرتاب می کند خطا گفتن که ما “React component suspended while rendering, but no fallback UI was specified”. این را می توان با پیچیدن قطعه با آن برطرف کرد React.Suspense's fallbackz و ضمیمه کردن پایه های بازگشتی همانطور که قبلا توضیح دادیم:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

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

علاوه بر این، ما می توانیم تصمیم بگیریم تخریب وارد کردن React برای پاک کردن کد و خوانایی بیشتر:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

تا کنون، نحوه پیاده سازی بارگذاری تنبل را در اجزای وارداتی خود دیده ایم. حال، بیایید ببینیم که چگونه آن را در مسیرهای خود در هنگام مسیریابی با روتر React پیاده سازی کنیم.

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

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

بارگذاری تنبلی React routes به وارد کردن پویا یک کامپوننت تنها در صورت نیاز اشاره دارد. به عنوان مثال، فرض کنید ما دو مسیر در برنامه خود داریم و دو مؤلفه نشان دهنده آن مسیرها. اگر مسیریابی ذکر شده را به روش زیر پیاده سازی کنیم، هر مؤلفه تنها زمانی بارگذاری می شود که به مسیر مربوطه پیمایش کنیم:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

نتیجه

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