التقسيم حسب المسار وعلى مستوى المكوّن
قسّم حسب المسار (على مستوى الشاشة) وداخل الشاشات (على مستوى الودجة). استخدم Suspense قرب المنطقة البطيئة لتبقى بقية الصفحة تفاعلية.
التقسيم حسب المسار وعلى مستوى المكوّن درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
مستويان: المسار والأداة
الهدف: قسّم المسارات (الشاشات بأكملها) والأدوات (الأجزاء الثقيلة داخل الشاشة). حافظ على محلية الواجهات البديلة حتى تظل الصفحة قابلة للاستخدام.
أين ولماذا تقسّم الشيفرة
- التقسيم وفق المسار: قسّم الصفحات الكبيرة
- التقسيم على مستوى المكوّن: قسّم المخططات والمحررات
- ضع Suspense بالقرب من المنطقة البطيئة قدر الإمكان
عرض توضيحي: التقسيم بأسلوب المسارات
وفق المسار: تُحمّل علامة التبويب Reports وحدها تحميلًا كسولًا؛ بينما تُصيَّر علامات التبويب الأخرى فورًا.
<div id="root"></div>
عرض توضيحي: التقسيم على مستوى الأداة
على مستوى المكوّن: حمّل أداة Chart الثقيلة تحميلًا كسولًا؛ بينما يُصيَّر هيكل الصفحة فورًا.
<div id="root"></div>
عرض توضيحي: التحميل المسبق عند التمرير
التحميل المسبق عند توقّع النية: ابدأ التحميل عندما يمرّر المستخدم المؤشر فوق الزر، حتى تبدو عملية النقر فورية.
<div id="root"></div>
نصائح ومشكلات
- تجنّب وضع حد واحد ضخم؛ وحافظ على محليته
- طابق حجم الواجهة البديلة مع حجم واجهة المستخدم النهائية
- قسّم الشيفرة وفق تدفقات المستخدم (المسارات) والأدوات الثقيلة، لا وفق كل مكوّن صغير
اختبار استراتيجية التقسيم
مراجعة
مراجعة: قسّم الشاشات الكبيرة (المسارات) والأدوات الثقيلة. غلّف كل منطقة بطيئة داخل Suspense خاص بها مع واجهة بديلة صغيرة؛ وحمّل مسبقًا عند توقّع النية لتصبح عمليات النقر أسرع.
الأسئلة الشائعة
هل درس «التقسيم حسب المسار وعلى مستوى المكوّن» مجاني؟
نعم — نص درس «التقسيم حسب المسار وعلى مستوى المكوّن» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «التقسيم حسب المسار وعلى مستوى المكوّن»؟
قسّم حسب المسار (على مستوى الشاشة) وداخل الشاشات (على مستوى الودجة). استخدم Suspense قرب المنطقة البطيئة لتبقى بقية الصفحة تفاعلية. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «التقسيم حسب المسار وعلى مستوى المكوّن»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- React.lazy وSuspense — المكوّنات الكسولة
- التقسيم حسب المسار وعلى مستوى المكوّن
- الحزم والتخزين المؤقت وتلميحات التحميل المسبق