React Lazy Load

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

אז מי שמכיר את ריאקט יודע שמדובר בSPA שזה ראשי התיבות של Single Page Applications. מה שאומר שכברירת מחדל כל הרכיבים של אותה אפליקציה הופכים לקובץ JS שמכיל את כל רכיבי האפליקציה שזה עתה בניתם. אבל זה יכול לגרום לטעינה ראשונית איטית, אפשר כמובן לפתור את זה עם איזה SPEENER חמוד, אבל ברוב המקרים הגולשים יעדיפו מהירות על דברים חמודים ש"מבזבזים" להם את הזמן.

אז ככה זה נראה שאתם מסתכלים ב network:

שימו לב שהתקבל קובץ JS שלקח לנו לטעון 62MS במקרה הזה שכן השתמשתי בlazy

כמו כן אפשר לראות בsource את הקבצים שנטענו:

ניתן לראות שנטענו רק הרכיבים שמוצגים בעמוד זה (ללא רכיבים שקיימים בroute אחר)

ועכשיו אבקש לגשת לroute מסויים ואז נראה מה קורה:

בnetwork נקבל קובץ chunk של JS שהוא אוסף הרכיבים החדשים שהתווספו.

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

כך נראה קובץ index.jsx במיני הפרויקט הזה, והשימוש בlazy:

import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import { Outlet } from 'react-router-dom';

const Character = lazy(() => import('./pages/Character'));


const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "character/:id",
    element: <Suspense fallback={<div>Loading...</div>}>
      <Character />
    </Suspense>,
  },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
    <Outlet />
  </React.StrictMode>
);

reportWebVitals();

שורה 12 היא השורה שבה עושים שימוש בlazy. וכמו כן שימוש בלייזי דורש לעטוף את האלמנט של route עם Suspense כמו בשורה 22 .

ללא שימוש בlazy הטעינה של הקבצים תהיה ארוכה יותר

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

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

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

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

לסיכום React Lazy Load

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

פוסטים קשורים:

מודדים ביצועים עם ריאקט – React Profiler מדריך ריאקט – react hooks | useMemo & useCallback מדריך ריאקט – react hooks | useContext קורס חינם React & GraphQL – שיעור שלישי – צד שרת Nodejs של המשחק איקס עיגול.