التحميل الكسول في React

التحميل الكسول (Lazy Loading) في React

تُنتج تطبيقات React الكبيرة حزم JavaScript ضخمة. الحزم الضخمة تُبطئ موقعك. ينتظر المستخدمون لفترة أطول للتفاعل مع تطبيقك. وهذا يضر بتجربة المستخدم الخاصة بك.

التحميل الكسول (Lazy loading) يحل هذه المشكلة. فهو يقوم بتحميل المكونات فقط عندما يحتاجها المستخدمون. ستتوقف عن تحميل كل شيء دفعة واحدة.

فوائد التحميل الكسول (lazy loading):

• حجم أصغر للحزمة الأولية
• تحميل أسرع للصفحات
• تجربة مستخدم أفضل
• استهلاك أقل لنطاق التردد (bandwidth)
• تحسين مؤشرات أداء الويب الأساسية (Core Web Vitals)

كيفية استخدام React.lazy() توفر React دالة تسمى lazy() لاستيراد المكونات ديناميكيًا. تقوم React بتنزيل الكود فقط عند عرض (render) المكون.

مثال برمجِي:

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 خارج دوال المكونات الخاصة بك.

هل تستخدم التحميل الكسول (lazy loading) في مشاريعك؟ اترك تعليقًا أدناه، وسأقوم بالرد عليك.

المصدر: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk