الاستيراد الديناميكي import() في الوحدات
تحميل الوحدات عند الطلب باستخدام import() الديناميكي
الاستيراد الديناميكي import() في الوحدات درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
تعبير import()
على خلاف تصريح import الثابت، فإن import("./module.js") تعبير يعيد Promise تُحل إلى مساحة أسماء الوحدة. ويعمل هذا التعبير في أي مكان، داخل الدوال والشروط وحتى داخل النصوص البرمجية غير التابعة للوحدات.
تقسيم الشيفرة
يُعد الاستيراد الديناميكي الآلية الأساسية لتقسيم الشيفرة. ويمكن لمعالج المسار تأجيل تحميل شيفرة المسار حتى ينتقل المستخدم إليه: const mod = await import("./routes/admin.js"). ولا تُنزَّل بايتات المسار قبل الحاجة إليها.
document.getElementById("settings-btn").addEventListener("click", async () => {
const { renderSettings } = await import("./settings.js");
renderSettings();
});مساحة أسماء الوحدة المُعادة
القيمة التي تُحل هي مساحة أسماء الوحدة، أي كائن تكون صادرات الوحدة خصائص له. فككوا الصادرات المسماة مباشرةً، أو ا الوصول إلى التصدير الافتراضي باستخدام module.default.
التقاط الأخطاء
بما أن import() يعيد وعدًا، تنتقل أخطاء الجلب الفاشل أو الخطأ النحوي إلى .catch(). غلّفوا عمليات الاستيراد الديناميكي ضمن try/catch (في الدوال غير المتزامنة) أو استخدموا .catch() لمعالجة أعطال الشبكة بسلاسة.
try {
const mod = await import("./optional.js");
mod.run();
} catch (e) {
console.warn("Optional module failed", e);
}التحميل المشروط
حمّلوا polyfill فقط في المتصفحات القديمة: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). تتجاوز المتصفحات الحديثة هذه البايتات بالكامل، بينما لا تتحمل المتصفحات القديمة تكلفتها إلا عند الحاجة.
حل المحددات
يتبع المحدد القواعد نفسها المتبعة في الاستيراد الثابت: عناوين URL النسبية أو المطلقة، أو الأسماء العارية المعيّنة عبر خريطة الاستيراد. وتعمل السلاسل الديناميكية أيضًا: import(`./locales/${lang}.js`)، رغم أن أدوات التجميع قد تواجه صعوبة في تقسيم هذا النوع من الشيفرة.
التخزين المؤقت
يُحل كل محدد فريد إلى نسخة الوحدة نفسها. ويعيد import("./mod.js") الثاني الوحدة المحمّلة مسبقًا من دون جولة ذهاب إلى الشبكة، مما يجعل استخدام الاستيراد الديناميكي في معالجات الأحداث آمنًا من دون القلق بشأن تكرار التنزيلات.
الاستيراد الديناميكي على المستوى الأعلى
يمكنكم داخل الوحدة استخدام await على المستوى الأعلى مع الاستيراد الديناميكي لتأخير التنفيذ حتى يتوفر مساعد محمّل بطريقة غير متزامنة. ويفيد ذلك في أنظمة الإضافات التي تُعرف قائمة إضافاتها وقت التشغيل.
// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();الاستخدام مع React.lazy وPreact
تغلّف React.lazy وPreact's `lazy` from preact/compat وVue's defineAsyncComponent الاستيراد الديناميكي لتقسيم الشيفرة على مستوى المكوّنات. primitive المتصفح هو import()؛ وتضيف أطر العمل فوقه حدود تحميل شبيهة بـ suspense.
التقسيم في Webpack وVite
ترى أدوات التجميع import("...") في المصدر، وتُصدر جزءًا منفصلًا للوحدة المستوردة. ويجلب كود وقت التشغيل هذا الجزء عند الاستدعاء الأول. يكتب المؤلف import() وفق مواصفة ES، بينما تنشئ أداة التجميع تسلسل طلبات الشبكة.
خطأ شائع
يؤدي استدعاء import("X") داخل مسار حرج (مثل حلقة عرض) إلى إعادة فحص ذاكرة التخزين المؤقت في كل استدعاء. ورغم أنه لا يعيد التنزيل، فإن عملية البحث لها كلفة. خزّنوا مساحة الأسماء المُحلّة في متغير بعد الاستيراد الأول.
اختبار المعرفة
ماذا يعيد import("./mod.js")؟
الخلاصة
الاستيراد الديناميكي import() هو النظير عند الطلب لتصريح الاستيراد الثابت. ويعيد Promise تُحل إلى مساحة أسماء الوحدة، مما يتيح تقسيم الشيفرة، وعمليات polyfill المشروطة، وأنظمة الإضافات. تُخزّن الوحدات مؤقتًا بعد الاستيراد الأول، لذا تكون الاستدعاءات اللاحقة مجانية. وتُصدر أدوات التجميع أجزاءً منفصلة لكل استدعاء استيراد ديناميكي.
الأسئلة الشائعة
هل درس «الاستيراد الديناميكي import() في الوحدات» مجاني؟
نعم — نص درس «الاستيراد الديناميكي import() في الوحدات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «الاستيراد الديناميكي import() في الوحدات»؟
تحميل الوحدات عند الطلب باستخدام import() الديناميكي تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الاستيراد الديناميكي import() في الوحدات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نصوص وحدات ES من النوع type=module
- خرائط الاستيراد importmap
- الاستيراد الديناميكي import() في الوحدات
- أساسيات Module Federation