0Pricing
React Academy · درس

تحليل الحزم وإزالة الشيفرة غير المستخدمة

اقرأ تقارير الحزم، واعثر على الوحدات الكبيرة، وقلّل حجمها بشيفرة ملائمة لـ tree-shaking: صادرات ESM مسمّاة، ومن دون آثار جانبية عليا، وتحميل كسول عند الحاجة.

تحليل الحزم وإزالة الشيفرة غير المستخدمة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.

لماذا نحلل الحزم؟

الهدف: تصغير الحزمة.

  • اقرأ تقارير الحزمة
  • اعتمد ESM قابلًا لـtree-shaking
  • حمّل الشاشات النادرة عند الحاجة

الإشارات في التقارير

  • اعتماديات كبيرة (المخططات ومكتبات التاريخ)
  • إصدارات مكررة
  • آثار جانبية على المستوى الأعلى
  • استيرادات افتراضية تسحب الحزم كاملة

التصديرات المسماة ومن دون آثار جانبية

فضّل التصديرات المسماة وحافظ على الوحدات نقية (من دون آثار جانبية عند الاستيراد).

<div id="root"></div>

لا توجد آثار جانبية على المستوى الأعلى

تجنب الآثار الجانبية وقت الاستيراد، واعرض دوالًا واستدعها بعد الاستيراد.

<div id="root"></div>

التحميل الكسول باستخدام React.lazy

حمّل الشاشات النادرة عند الحاجة للحفاظ على صغر الحزمة الأولية، واعرض بديلًا صغيرًا أثناء ذلك.

<div id="root"></div>

نصائح وقائمة تحقق

  • استخدم تصديرات ESM المسماة
  • حافظ على الوحدات نقية (من دون عمل وقت الاستيراد)
  • حمّل المسارات أو عناصر الواجهة النادرة بشكل كسول
  • فضّل البدائل الأصغر (مثل dayjs بدلًا من moment)

اختبار أساسيات tree-shaking

أي تغيير يساعد أدوات التجميع أكثر على تنفيذ tree-shaking للشيفرة غير المستخدمة؟

خلاصة

خلاصة: اقرأ تقارير الحزمة، وانتقل إلى تصديرات ESM المسماة، وأزل الآثار الجانبية وقت الاستيراد، وحمّل الشاشات النادرة بشكل كسول للحفاظ على خفة الحزمة الأولية.

الأسئلة الشائعة

هل درس «تحليل الحزم وإزالة الشيفرة غير المستخدمة» مجاني؟

نعم — نص درس «تحليل الحزم وإزالة الشيفرة غير المستخدمة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.

ماذا ستتعلم في «تحليل الحزم وإزالة الشيفرة غير المستخدمة»؟

اقرأ تقارير الحزم، واعثر على الوحدات الكبيرة، وقلّل حجمها بشيفرة ملائمة لـ tree-shaking: صادرات ESM مسمّاة، ومن دون آثار جانبية عليا، وتحميل كسول عند الحاجة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «تحليل الحزم وإزالة الشيفرة غير المستخدمة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

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

جميع الدروس في هذه الدورة

  1. إنشاءات التطوير والإنتاج وخرائط المصدر والبيئات
  2. تحليل الحزم وإزالة الشيفرة غير المستخدمة
  3. أساسيات CI: الفحص ← الاختبار ← الإنشاء
← العودة إلى React Academy