إليك دليل خطوة بخطوة لتنفيذ التحميل البطيء وتقسيم التعليمات البرمجية في مشروع React. سنقوم بإنشاء تطبيق بسيط بطريقتين، وتحميل المكونات بتكاسل.

الخطوة 1: إنشاء تطبيق React جديد

إذا لم تكن قد قمت بذلك بالفعل، قم بإنشاء تطبيق React جديد باستخدام إنشاء تطبيق React:

npx create-react-app lazy-loading-example
cd lazy-loading-example

الخطوة 2: تثبيت جهاز التوجيه React

تثبيت رد فعل جهاز التوجيه-دوم للتوجيه:

npm install react-router-dom

الخطوة 3: إعداد التحميل البطيء وتقسيم التعليمات البرمجية

إنشاء المكونات

1. قم بإنشاء مجلد باسم المكونات داخل دليل src.
2. داخل المكونات، أنشئ ملفين: Home.js وAbout.js.

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

تحديث App.js

الآن، قم بتعديل ملف App.js الخاص بك لتنفيذ التحميل والتوجيه البطيء:

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Lazy load components
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    Loading...}>
        
  );
}

export default App;

الخطوة 4: قم بتشغيل التطبيق الخاص بك

الآن، قم بتشغيل التطبيق الخاص بك لرؤيته قيد التنفيذ:

npm start

الخطوة 5: اختبار التحميل البطيء

1. افتح متصفحك وانتقل إلى http://localhost:3000.
2. انقر على الرابط "الصفحة الرئيسية" لرؤية تحميل مكون الصفحة الرئيسية.
3. انقر على الرابط "حول" لرؤية تحميل المكون بتكاسل.

النقاط الرئيسية

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

تحسينات إضافية

يمكنك تحسين إعدادك بشكل أكبر من خلال:

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

إذا كنت بحاجة إلى مزيد من الميزات المحددة أو مساعدة إضافية، فأخبرني!