מדריך לטעינה עצלה עם React

מבוא

בעת פיתוח אפליקציות React גדולות, אנו בדרך כלל משתמשים בתמונות וסרטונים רבים, מתקינים חבילות/ספריות של צד שלישי, מבצעים קריאות API ועושים מגוון דברים אחרים. זה כמובן מגדיל את הזמן שלוקח לטעון את האפליקציה שלנו ומביא לגודל חבילה עצום, מה שתורם לחוויית משתמש גרועה. זה המקום שבו טעינה איטית מגיע למקום. זה מאפשר לנו לטעון את התוכן בדיוק בזמן, ממש לפני שהוא יוצג באפליקציה.

אנחנו יכולים להימנע מטעינה מראש של תוכן בזמן שהוא עדיין מחוץ לתצוגה, ולמקד את כל המשאבים בתוכן שנמצא בתצוגה.

במדריך זה, נבחן כיצד להשתמש React.lazy() ו React.Suspense ליישם פונקציונליות טעינה עצלה ופיצול קוד המאפשרת לנו לטפל בפיצול קוד ללא צורך בהתקנת ספריות נוספות.

מה זה Lazy Loading?

כאשר אנו משיקים אפליקציית אינטרנט של React, היא בדרך כלל מאגדת את כל האפליקציה בבת אחת, תוך שהיא טוענת עבורנו הכל כולל כל דפי אפליקציית האינטרנט, תמונות, תוכן ועוד הרבה יותר, דבר שעלול לגרום לזמן טעינה איטי ולביצועים גרועים בסך הכל, תלוי ב גודל התוכן ורוחב הפס של האינטרנט באותו זמן.

טעינה איטית מאפשר לנו לטעון רכיבים ספציפיים רק כאשר הם נחוצים. בדרך כלל, אנחנו גם מבצעים פיצול קוד לתוך רכיבים לוגיים שאפשר להעמיס בעצלתיים גם עם התוכן.

לדוגמא, אם יש לנו עמוד לוח מחוונים המציג מידע רב ממקורות שונים בעת לחיצה, תמיד עדיף להשאיר את הרכיבים והעמודים הללו נטענים בעצלתיים, כך שהם נטענים רק כשצריך או נדרש על ידי המשתמש.

הערה: התהליך של יריקת חבילת קוד גדולה לתוך חבילות מרובות שניתן לטעון באופן דינמי במטרה הכוללת להימנע מבעיות ביצועים הקשורות לחבילות גדולות מדי, ידוע בשם פיצול קוד. זה מושג מבלי להפחית את כמות הקוד באפליקציה שלנו.

לסיכום, טעינה עצלנית מאפשרת לנו להציג רכיבים או אלמנטים לפי דרישה, מה שהופך את האפליקציה שלנו ליעילה יותר ומספקת חווית משתמש טובה יותר.

הערה: יישומי עמוד בודד (ספא) נועדו להכיל את כל העמודים והתוכן בתוך מסמך/עמוד בודד. זו הסיבה שהטעינה העצלה שימושית במיוחד בעת פיתוח ספא.

כיצד ליישם טעינה עצלה ב-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(), אבל הקוד שלמעלה תמיד יזרוק an שגיאה אומר את זה שלנו “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.

כיצד ליישם טעינה עצלה עם נתב React

ניתוב עצלן הוא למעשה תרגול טוב למסלולים שיש בהם הרבה תוכן ועלולים להאט את זמן הטעינה של האפליקציה שלך. הטמעת טעינה עצלנית עבור מסלולי React זהה כמעט למה שעשינו קודם בעת טעינה עצלנית של רכיבים מיובאים דינמיים.

Lazy loading React מסלולים מתייחסים לייבוא ​​דינמי של רכיב רק כאשר הוא נחוץ. לדוגמה, נניח שיש לנו שני מסלולים באפליקציה שלנו ושני רכיבים המייצגים את המסלולים הללו. אם ניישם את הניתוב המוזכר בדרך הבאה, כל רכיב ייטען רק כאשר אנו מנווטים למסלול המתאים:

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;

סיכום

במדריך זה למדנו מהי טעינה עצלנית ופיצול קוד, כיצד ליישם אותם ושהמקום הטוב ביותר ליישם טעינה עצלנית הוא עם מסלולים. כך נמנע רינדור של כל העמוד בבת אחת, מה שעלול לגרום לזמן טעינה איטי יותר כאשר עוסקים בדפים עם כמויות גדולות של תוכן.