נפתרה: להגיב לעומס עצלן של הנתב

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

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function App() { 

  return ( 

    <Router> 

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

        <Switch>  

          <Route exact path="/" component={Home} />  

          <Route path="/about" component={About} />  

          <Route path="/contact" component={Contact} />  

        </Switch>  

      </Suspense> 

    </Router>  ); } export default App;

1. ייבוא ​​React, { Suspense } מתוך 'react';
// שורה זו מייבאת את ספריית React ואת רכיב ה-Suspense מספריית React.

2. ייבא את { BrowserRouter כנתב, נתב, מתג } מ'react-router-dom';
// שורה זו מייבאת את רכיבי BrowserRouter, Route ו-Switch מספריית react-router-dom.

3. const Home = React.lazy(() => import('./Home'));
// השורה הזו יוצרת קבוע בשם Home שמשתמש בתכונת הטעינה העצלה של React כדי לייבא באופן דינמי רכיב בשם Home מקובץ באותה ספרייה כמו הקובץ הזה (רכיב האפליקציה).

4. const About = React.lazy(() => import('./About'));
// שורה זו יוצרת קבוע בשם About שמשתמש בטעינה עצלה כדי לייבא באופן דינמי רכיב בשם About מקובץ באותה ספרייה כמו הקובץ הזה (רכיב האפליקציה).
const Contact = React.lazy(() => import('./Contact')); // שורה זו יוצרת קבוע בשם Contact שמשתמש בטעינה עצלה כדי לייבא באופן דינמי רכיב בשם Contact מקובץ באותה ספרייה כמו הקובץ הזה (רכיב האפליקציה).

5. function App() { return ( // זוהי פונקציית חץ אשר מחזירה קוד JSX עטוף בתג נתב אשר מיובא מוקדם יותר

6.טוען…

}> //תג המתח הזה עוטף את כל המסלולים שלנו עם אביזרי החזרה של Loading... אם מסלול כלשהו לוקח זמן לטעון

7. //Switch tag יוודא שרק מסלול אחד יוצג בבת אחת

8. //מסלול זה יציג את רכיב הבית כאשר הנתיב המדויק "/" תואם

9. //המסלול הזה יציג את About Component כאשר נתיב "/about" מותאם

10. //המסלול הזה יציג את רכיב אנשי הקשר כאשר נתיב "/contact" מותאם ) } ייצוא אפליקציית ברירת מחדל; //לבסוף אנו סוגרים את כל התגים ומייצאים את האפליקציה שלנו

בעיית עומס עצלן

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

מה זה עומס עצלן React

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

איך אני משתמש ב-React lazy בנתב שלי

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

כדי להשתמש ב-React lazy על הנתב שלך ב-React Router, עליך לעטוף את הרכיב שברצונך לטעון בעצלתיים בשיחת ייבוא ​​דינמית. לדוגמה:

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

לאחר מכן, בעת הגדרת המסלולים שלך, פשוט העבירו את רכיב MyComponent לתוך רכיב המסלול כך:

זה יגרום ל-React Router לטעון באופן דינמי את רכיב MyComponent בעת ניווט למסלול זה.

הודעות קשורות:

השאירו תגובה