از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای بارگذاری تنبل با React هنگام توسعه برنامه‌های بزرگ React، ما معمولاً از تصاویر و ویدیوهای زیادی استفاده می‌کنیم، بسته‌ها/کتابخانه‌های شخص ثالث را نصب می‌کنیم، تماس‌های API برقرار می‌کنیم و کارهای مختلفی انجام می‌دهیم. این به طور طبیعی زمان بارگذاری برنامه ما را افزایش می دهد و منجر به یک اندازه بزرگ باندل می شود که به یک کاربر ضعیف کمک می کند …
سرفصلهای مطلب
معرفی
هنگام توسعه برنامه‌های بزرگ React، ما معمولاً از تصاویر و ویدیوهای زیادی استفاده می‌کنیم، بسته‌ها/کتابخانه‌های شخص ثالث را نصب می‌کنیم، تماس‌های API برقرار می‌کنیم و کارهای مختلف دیگری را انجام می‌دهیم. این به طور طبیعی زمان بارگیری برنامه ما را افزایش می‌دهد و منجر به یک اندازه بزرگ بسته می‌شود که به تجربه کاربری ضعیف کمک می‌کند. این جایی است که بارگذاری تنبل سر جایش می آید. ما را قادر می سازد تا محتوا را بارگذاری کنیم درست سر وقت، درست قبل از اینکه در برنامه نمایش داده شود.
ما می‌توانیم از بارگذاری پیش‌بارگذاری محتوا در زمانی که هنوز در معرض دید نیست اجتناب کنیم و همه منابع را متمرکز کنیم روی محتوایی که در دید است.
در این راهنما، روش استفاده را بررسی خواهیم کرد
React.lazy()وReact.Suspenseبرای پیاده سازی قابلیت بارگذاری تنبل و تقسیم کد که به ما امکان می دهد بدون نیاز به نصب کتابخانه های اضافی، تقسیم کد را مدیریت کنیم.
بارگذاری تنبل چیست؟
هنگامی که یک برنامه وب React را راه اندازی می کنیم، معمولاً کل برنامه را به یکباره بسته بندی می کند، همه چیز از جمله کل صفحات برنامه وب، تصاویر، محتوا و بسیاری موارد دیگر را برای ما بارگیری می کند، که بسته به اینکه منجر به کندی بارگذاری و عملکرد کلی ضعیف می شود. روی اندازه محتوا و پهنای باند اینترنت در آن زمان.
بارگذاری تنبل به ما اجازه می دهد تا اجزای خاص را فقط در صورت نیاز بارگذاری کنیم. به طور معمول، ما نیز اجرا می کنیم تقسیم کد به مؤلفه‌های منطقی که می‌تواند با محتوا نیز بارگذاری شود.
مثلاً اگر داشبورد داشته باشیم page که هنگام کلیک کردن، اطلاعات زیادی را از منابع مختلف نمایش می‌دهد، همیشه بهتر است این اجزا و صفحات به صورت تنبل بارگذاری شوند، بنابراین فقط در صورت نیاز یا نیاز کاربر بارگیری می‌شوند.
توجه داشته باشید: را process تقسیم یک بسته بزرگ کد به باندل های متعدد که می توانند به صورت پویا بارگذاری شوند با هدف کلی جلوگیری از مشکلات عملکرد مرتبط با بسته های بزرگ به عنوان شناخته می شود. رمز و راز کننده. این بدون کاهش مقدار کد در برنامه ما انجام می شود.
به طور خلاصه، بارگذاری تنبل به ما اجازه می دهد تا اجزا یا عناصر را ارائه دهیم روی تقاضا، برنامه ما را کارآمدتر می کند و تجربه کاربری بهتری ارائه می دهد.
توجه داشته باشید: برنامه های تک صفحه ای (اسپا) به گونه ای طراحی شده اند که شامل تمام صفحات و محتوا در یک سند واحد باشد/page. به همین دلیل است که بارگذاری تنبل به ویژه هنگام توسعه SPA مفید است.
روش پیاده سازی Lazy Loading در React
تا اینجا، ما دیدیم که بارگذاری تنبل چیست و چرا اجرای آن مهم است. حال، بیایید ببینیم چگونه می‌توانیم آن را در برنامه‌های React خود پیاده‌سازی کنیم، با استفاده از دو ویژگی React که پیاده‌سازی کدها و بارگذاری تنبل را آسان می‌کند – React.Lazy () و React.Suspense.
React.lazy() تابعی است که به ما امکان رندر می دهد واردات پویا مانند اجزای معمولی. استفاده از واردات پویا در کنار React.lazy() ما را قادر می سازد تا import یک جزء درست قبل از ارائه روی یک صفحه. نکته مهمی که باید به آن توجه کرد این است 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';
// Lazy loading
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 export.
ما بارگذاری تنبل را با استفاده از آن اجرا کردیم 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;
توجه داشته باشید: پشتیبان بازگشتی می‌تواند قبل از بارگیری محتوای اصلی، یک مؤلفه را برای نمایش بگذارد.
علاوه بر این، ما می توانیم تصمیم بگیریم تخریب واکنش نشان می دهد import برای پاک کردن کد و خوانایی بیشتر:
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 Router پیاده سازی کنیم.
روش پیاده سازی 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;
نتیجه
در این راهنما، ما یاد گرفتیم که بارگذاری تنبل و تقسیم کد چیست، چگونه آنها را پیاده سازی کنیم و بهترین مکان برای پیاده سازی بارگذاری تنبل، مسیرها است. این از رندر کردن کل جلوگیری می کند page به یکباره، که ممکن است باعث کندی بارگذاری در هنگام برخورد با صفحات با حجم زیاد شود.
منتشر شده در 1403-01-08 01:52:04
