𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

Lazy Loading ב-React

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

Lazy loading פותר את זה. הוא טוען רכיבים (components) רק כשהמשתמשים זקוקים להם. אתה מפסיק לטעון הכל בבת אחת.

יתרונות של lazy loading:

• גודל חבילה ראשוני קטן יותר
• טעינת דפים מהירה יותר
• חוויית משתמש טובה יותר
• שימוש נמוך יותר ברוחב פס
• מדדי Core Web Vitals טובים יותר

איך להשתמש ב-React.lazy() React מספקת פונקציה בשם lazy() כדי לייבא רכיבים באופן דינמי. React מורידה את הקוד רק כאשר היא מרנדרת את הרכיב.

קוד לדוגמה:

import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

עליך להשתמש ב-Suspense עם רכיבי lazy. Suspense מציגה ממשק משתמש חלופי (fallback UI) בזמן שהרכיב נטען.

קוד לדוגמה:

import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

שני כללים להצלחה:

• הרכיבים שלך חייבים להשתמש ב-default exports.
• הצהר על ה-lazy imports שלך מחוץ לפונקציות הרכיבים.

האם אתם משתמשים ב-lazy loading בפרויקטים שלכם? השאירו תגובה למטה. אני אענה לכם.

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk