טעינה עצלה ריאקט - Lazy Loading React

תמלול ההרצאה: טעינה עצלה ריאקט - Lazy Loading React

הטקסט המלא של הדקות הראשונות בהרצאה «טעינה עצלה ריאקט - Lazy Loading React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:52

   ואלה כל הקבצים שהפרונט-אנד בעצם קיבל מהבאק-אנד. הנה אנחנו רואים את התמונה של הלוגו פה, הנה אנחנו רואים פה את השיר mp3 שהבאנו, הנה אנחנו רואים פה את הפאביקון, האייקון הזה הקטן שהגיע, יש לנו פה כמובן ג'אווה סקריפט ויש לנו כאן כמובן את ה-css וכולי, אבל האתר בגלל שהוא single page application אז הוא הביא את כל מה שקיים

3. 01:27

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

4. 01:54

   מפני שכל ה-JavaScript וכל ה-CSS כבר נטענו לפרונט וכל מה שהפרונט עושה זה רק מציג אותם אוקיי נראה הגיוני וזה בעצם התנהגות של סינגל פייג' אפליקיישן אבל רגע רגע רגע מה קורה אם יש לנו איזשהו קומפוננט שאנחנו אומרים לעצמנו רגע זה קומפוננט שהוא יחסית נדיר לצפייה לא הרבה משתמשים בעצם יגיעו

5. 02:25

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

6. 02:44

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

7. 03:03

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

8. 03:26

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

9. 03:45

   אנחנו רוצים לטפל באישו הזה והטיפול הזה נקרא Lazy Loading. Lazy Loading זה מצב שבו אנחנו אומרים רגע יש לנו פה איזושהי קומפוננטה וואלה לא לא לא הייתי מביא אותה על התאנה הראשונית אם היוזר ירצה לראות אותה אז רק ניגש ונביא זאת אומרת היא נטענת בצורת ליזי היא לא נטענת בתאנה הראשונית של האתר.

10. 04:12

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

11. 04:38

    בואו נגיד שאת ה-contact us אנחנו רוצים לטעון בצורת lazy loading. איך אנחנו יכולים לעשות את זה? בואו ניגש בחזרה לאתר שלנו.

12. 04:49

    לצורך כך אנחנו צריכים להתקין ספרייה. אז אנחנו רוצים להתקין את npm-i והספרייה הזאת נקראת react-loadable. זה לא קיים built-in, אנחנו צריכים לגשת ולהתקין את זה, איזשהו package ליתר דיוק מאשר ספרייה.

13. 05:12

    הדבר הזה מגיע גם עם הטייפים ואנחנו צריכים גם טייפs /react-loadable אותו הדבר שיש לנו פה react-loadable יש לנו גם פה react-loadable זאת הספרייה שאנחנו רוצים להתקין זה בעצם שתי חבילות כאלה שני פאקג'ים בואו נתקין את זה ואחרי שזה מותקן אנחנו יכולים לשלב את זה כאן במנגנון הראוטינג מנגנון הראוטינג

14. 05:51

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

15. 06:18

    שיש בה שימוש כביכול אנחנו רוצים להפוך את הדבר הזה ל-Lazy loading בואו רגע את זה נשכפל נשים את זה בהערה ואחר כך נמחק אותו ואנחנו רוצים לבוא ולהגיד רגע אנחנו לא רוצים את הקומפוננטה הזאת פה אסור לנו למעשה לבצע שום שימוש בקומפוננטה Contact us בצורה כזאת של Hardcoded בצורה של שימוש בקומפוננטה אני אפילו הוא מוחק אותה מכאן.

16. 06:55

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

17. 07:15

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

18. 07:49

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

19. 08:15

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