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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    جاري التحميل...

في هذا المثال، ستظهر رسالة جاري التحميل... بينما يتم تحميل MyComponent. بمجرد تحميل المكون، سيحل محل واجهة المستخدم الاحتياطية.

3. مثال عملي: التحميل الكسول لمعرض صور كبير

دعنا نعتبر سيناريو حيث لديك معرض صور كبير. يمكن أن يؤثر تحميل جميع الصور دفعة واحدة بشكل كبير على الأداء. إليك كيفية تحميل الصور كسولًا باستخدام React.lazy() و <Suspense>:

import React, { Suspense } from 'react';

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

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'الصورة 1' },
    { id: 2, src: 'image2.jpg', alt: 'الصورة 2' },
    { id: 3, src: 'image3.jpg', alt: 'الصورة 3' },
    // ... المزيد من الصور
  ];

  return (
    

      {images.map(image => (
        جاري تحميل الصورة...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

ومكون Image.js:

import React from 'react';

const Image = ({ src, alt }) => {
  return ;
};

export default Image;

في هذا المثال، يتم تغليف كل صورة بمكون <Suspense>، لذلك سيتم عرض رسالة تحميل لكل صورة أثناء تحميلها. وهذا يمنع الصفحة بأكملها من التعطل أثناء تنزيل الصور.

تقنيات واعتبارات متقدمة

1. حدود الأخطاء (Error Boundaries)

عند استخدام التحميل الكسول، من المهم التعامل مع الأخطاء المحتملة التي قد تحدث أثناء عملية التحميل. يمكن استخدام حدود الأخطاء (Error Boundaries) لالتقاط هذه الأخطاء وعرض واجهة مستخدم احتياطية. يمكنك إنشاء مكون حد خطأ على النحو التالي:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
حدث خطأ ما.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

ثم قم بتغليف مكون <Suspense> بمكون <ErrorBoundary>:

  جاري التحميل...}>
    
  

إذا حدث خطأ أثناء تحميل MyComponent، سيلتقطه <ErrorBoundary> ويعرض واجهة المستخدم الاحتياطية.

2. العرض من جانب الخادم (SSR) والتحميل الكسول

يمكن أيضًا استخدام التحميل الكسول بالتزامن مع العرض من جانب الخادم (SSR) لتحسين وقت التحميل الأولي لتطبيقك. ومع ذلك، فإنه يتطلب بعض الإعدادات الإضافية. ستحتاج إلى التأكد من أن الخادم يمكنه التعامل بشكل صحيح مع الاستيرادات الديناميكية وأن المكونات التي تم تحميلها كسولًا يتم "ترطيبها" بشكل صحيح على جانب العميل.

توفر أدوات مثل Next.js و Gatsby.js دعمًا مدمجًا للتحميل الكسول وتقسيم الشيفرة في بيئات SSR، مما يجعل العملية أسهل بكثير.

3. التحميل المسبق للمكونات التي تم تحميلها كسولًا

في بعض الحالات، قد ترغب في التحميل المسبق لمكون تم تحميله كسولًا قبل أن تكون هناك حاجة فعلية إليه. يمكن أن يكون هذا مفيدًا للمكونات التي من المحتمل أن يتم عرضها قريبًا، مثل المكونات الموجودة أسفل الطية ولكن من المحتمل أن يتم تمريرها إلى العرض. يمكنك التحميل المسبق لمكون عن طريق استدعاء دالة import() يدويًا:

import('./MyComponent'); // تحميل MyComponent مسبقًا

سيؤدي هذا إلى بدء تحميل المكون في الخلفية، بحيث يكون متاحًا بشكل أسرع عندما يتم عرضه بالفعل.

4. الاستيرادات الديناميكية مع تعليقات Webpack السحرية

توفر "التعليقات السحرية" في Webpack طريقة لتخصيص أسماء أجزاء الشيفرة التي تم إنشاؤها. يمكن أن يكون هذا مفيدًا لتصحيح الأخطاء وتحليل بنية حزمة تطبيقك. على سبيل المثال:

const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

سيؤدي هذا إلى إنشاء جزء شيفرة باسم "my-component.js" (أو ما شابه ذلك) بدلاً من اسم عام.

5. تجنب الأخطاء الشائعة

• التقسيم المفرط: قد يؤدي تقسيم شيفرتك إلى العديد من الأجزاء الصغيرة جدًا إلى تقليل الأداء بسبب الحمل الزائد الناتج عن إجراء طلبات شبكة متعددة. ابحث عن توازن يناسب تطبيقك.
• وضع Suspense غير صحيح: تأكد من وضع حدود <Suspense> بشكل مناسب لتوفير تجربة مستخدم جيدة. تجنب تغليف الصفحات بأكملها بـ <Suspense> إن أمكن.
• نسيان حدود الأخطاء: استخدم دائمًا حدود الأخطاء للتعامل مع الأخطاء المحتملة أثناء التحميل الكسول.

أمثلة واقعية وحالات الاستخدام

يمكن تطبيق التحميل الكسول على مجموعة واسعة من السيناريوهات لتحسين أداء تطبيقات React. إليك بعض الأمثلة:

• مواقع التجارة الإلكترونية: يمكن أن يؤدي التحميل الكسول لصور المنتجات ومقاطع الفيديو ووصف المنتجات المفصل إلى تحسين كبير في وقت التحميل الأولي لصفحات المنتجات.
• المدونات ومواقع الأخبار: يمكن أن يؤدي التحميل الكسول للصور ومقاطع الفيديو المضمنة وأقسام التعليقات إلى تعزيز تجربة القراءة وتقليل معدلات الارتداد.
• لوحات المعلومات ولوحات التحكم الإدارية: يمكن أن يؤدي التحميل الكسول للمخططات والرسوم البيانية والجداول المعقدة إلى تحسين استجابة لوحات المعلومات ولوحات التحكم الإدارية.
• تطبيقات الصفحة الواحدة (SPAs): يمكن أن يؤدي التحميل الكسول للمسارات والمكونات إلى تقليل وقت التحميل الأولي لتطبيقات الصفحة الواحدة وتحسين تجربة المستخدم الشاملة.
• التطبيقات الدولية: تحميل الموارد الخاصة باللغة (نصوص، صور، إلخ) فقط عند الحاجة إليها للغة المستخدم. على سبيل المثال، تحميل الترجمات الألمانية لمستخدم في ألمانيا، والترجمات الإسبانية لمستخدم في إسبانيا.

مثال: موقع تجارة إلكترونية دولي

تخيل موقعًا للتجارة الإلكترونية يبيع المنتجات على مستوى العالم. قد يكون لكل دولة عملات ولغات وكتالوجات منتجات مختلفة. بدلاً من تحميل جميع البيانات لكل دولة مقدمًا، يمكنك استخدام التحميل الكسول لتحميل البيانات الخاصة بموقع المستخدم فقط عندما يزور الموقع.

const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // دالة لتحديد بلد المستخدم

  return (
    جاري تحميل المحتوى لمنطقتك...}>
      
      
    
  );
}

الخاتمة

يعد التحميل الكسول وتقسيم شيفرة المكونات من التقنيات القوية لتحسين أداء تطبيقات React. من خلال تحميل المكونات فقط عند الحاجة إليها، يمكنك تقليل وقت التحميل الأولي بشكل كبير، وتحسين تجربة المستخدم، وتعزيز تحسين محركات البحث (SEO) لديك. مكونات React.lazy() و <Suspense> المدمجة في React تجعل من السهل تنفيذ التحميل الكسول في مشاريعك. احتضن هذه التقنيات لبناء تطبيقات ويب أسرع وأكثر استجابة وجاذبية لجمهور عالمي.

تذكر دائمًا مراعاة تجربة المستخدم عند تنفيذ التحميل الكسول. وفر واجهات مستخدم احتياطية غنية بالمعلومات، وتعامل مع الأخطاء المحتملة بلطف، وحلل أداء تطبيقك بعناية للتأكد من أنك تحقق النتائج المرجوة. لا تخف من تجربة طرق مختلفة والعثور على أفضل حل لاحتياجاتك الخاصة.