العربية

حقق أوقات تحميل أولية أسرع وأداءً محسنًا لتطبيقات React الخاصة بك باستخدام التحميل الكسول وتقسيم شيفرة المكونات. تعلم تقنيات عملية وأفضل الممارسات.

التحميل الكسول في React: تقسيم شيفرة المكونات لتحسين الأداء

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

ما هو التحميل الكسول وتقسيم الشيفرة؟

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

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

لماذا نستخدم التحميل الكسول وتقسيم الشيفرة في React؟

إليك سبب وجوب التفكير في دمج التحميل الكسول وتقسيم الشيفرة في مشاريع React الخاصة بك:

كيفية تنفيذ التحميل الكسول في React

يوفر React دعمًا مدمجًا للتحميل الكسول باستخدام مكوني React.lazy و Suspense. إليك دليل خطوة بخطوة:

1. استخدام React.lazy()

تتيح لك React.lazy() استيراد المكونات ديناميكيًا، مما يؤدي إلى تقسيم شيفرتك بفعالية إلى أجزاء منفصلة. إنها تأخذ دالة تستدعي import()، والتي تُرجع Promise يحل إلى المكون.


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

في هذا المثال، سيتم تحميل MyComponent فقط عندما يكون على وشك العرض.

2. التغليف باستخدام <Suspense>

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


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 {alt};
};

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. تجنب الأخطاء الشائعة

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

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

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

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


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 تجعل من السهل تنفيذ التحميل الكسول في مشاريعك. احتضن هذه التقنيات لبناء تطبيقات ويب أسرع وأكثر استجابة وجاذبية لجمهور عالمي.

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