التحميل الكسول للمكوّنات
أجّل عرض المكوّنات غير المهمة باستخدام الاستيرادات الديناميكية ومراقبات التقاطع.
التحميل الكسول للمكوّنات درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
لماذا التحميل الكسول
أجّلوا تحميل المكوّنات الكبيرة أو غير الأساسية لتقليل حجم الحزمة الأولية.
الاستيراد الديناميكي
استخدموا import() لتحميل وحدة بشكل غير متزامن.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});العرض بعد التحميل
استخدموا <svelte:component> لعرض المكوّن الديناميكي.
{#if Component}
<svelte:component this={Component} />
{/if}مراقب التقاطع
ادمجوه مع IntersectionObserver للتحميل عند دخول العنصر النائب إلى إطار العرض.
غلاف الإجراء
أنشئوا إجراءً قابلًا لإعادة الاستخدام باسم use:lazy لتغليف هذا النمط.
حالة التحميل
اعرضوا هيكلًا هيكليًا أو مؤشّر تحميل إلى أن يصل المكوّن.
الاستخدام أسفل الجزء الظاهر
تصلح التعليقات والمنشورات ذات الصلة وعناصر التذييل جميعها للتحميل الكسول.
مكاسب الأداء
يقلّل ذلك JavaScript الأولي ويسرّع TTI، ولا سيما على الأجهزة المحمولة.
الجلب المسبق
يمكنكم اختياريًا تحميل الوحدات مسبقًا عند تمرير المؤشر أو عند اقترابها من إطار العرض لتصبح التفاعلات أسرع استجابة.
تجنّب الإفراط في التقسيم
بالنسبة إلى المكوّنات الصغيرة جدًا، تفوق تكلفة الاستيراد الديناميكي التوفير الناتج عنه.
الدمج مع البث
بالنسبة إلى الصفحات المعروضة على الخادم، يؤدي الجمع بين البث والتفعيل الكسول إلى عرض أول سريع.
تحقق سريع
كيف تعرضون مكوّنًا مستوردًا ديناميكيًا؟
مراجعة
حمّلوا المكوّنات الكبيرة تحميلًا كسولًا باستخدام الاستيراد الديناميكي وsvelte:component، مع إمكانية تشغيل ذلك عند التقاطع.
الأسئلة الشائعة
هل درس «التحميل الكسول للمكوّنات» مجاني؟
نعم — نص درس «التحميل الكسول للمكوّنات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «التحميل الكسول للمكوّنات»؟
أجّل عرض المكوّنات غير المهمة باستخدام الاستيرادات الديناميكية ومراقبات التقاطع. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «التحميل الكسول للمكوّنات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تقسيم الشيفرة والاستيرادات الديناميكية
- تحسين الصور باستخدام @sveltejs/enhanced-img
- التحميل الكسول للمكوّنات
- تحليل أداء تطبيقات SvelteKit