HTML Academy · درس

تلميحات الموارد modulepreload

تحميل وحدات ES مسبقًا لتسريع بدء تشغيل JavaScript

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

سبب وجود modulepreload

تشكل وحدات ES رسمًا بيانيًا للتبعيات: إذ تستورد وحدة الدخول وحدات أخرى، وتستورد تلك الوحدات المزيد. ومن دون مساعدة، لا يُكتشف كل مستوى من الشجرة إلا بعد تحليل المستوى السابق، مما ينتج سلسلة طلبات متتابعة تضر بأداء التحميل بشدة.

ما الذي يفعله modulepreload

يخبر <link rel="modulepreload" href="/app.js"> المتصفح بجلب الوحدة والوحدات التي تستوردها بصورة غير مباشرة فورًا وبالتوازي. وعندما يُشغَّل <script type="module">، يكون الرسم البياني بأكمله موجودًا في ذاكرة التخزين المؤقت.

مقارنةً بـ preload

يجلب preload الملفات أيضًا بالتوازي، لكنه لا يفهم عبارات import؛ فتحميل ملف وحدة مسبقًا لا يحمّل تبعياتها مسبقًا. أما modulepreload فيتبع عمليات الاستيراد تلقائيًا، وهذا هو الغرض الأساسي منه.

<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>

مكان وضعه

ضعه داخل <head> في أقرب موضع ممكن. يبدأ المتصفح طلب التحميل المسبق فورًا ويواصل تحليل HTML. وعندما يصل لاحقًا إلى <script type="module"> المطابق في المستند، يكون الملف موجودًا في الذاكرة بالفعل.

الاستكشاف والسير في الرسم البياني

يحلل المتصفح الوحدة المحمّلة مسبقًا بحثًا عن عبارات import، ثم يرسل طلبات جلب متوازية لكل عنوان URL مستورد، وبصورة تكرارية. ويتحمل المستخدم تكلفة رحلة ذهاب وإياب واحدة لكل مستوى، لكنه يحصل على التوازي داخل كل مستوى، مما يختصر المسار الحرج بدرجة كبيرة.

استخدامه مع أدوات التجميع

تُصدر أدوات التجميع الحديثة مثل Vite وRollup وWebpack 5+ وسوم modulepreload لأجزاء التعليمات البرمجية المقسمة تلقائيًا. وفي التطبيقات المُنشأة يدويًا، أنشئ هذه الوسوم من رسم الاستيراد أثناء البناء، حتى تظل القائمة دقيقة عند إضافة الوحدات أو إزالتها.

اعتبارات CrossOrigin

بالنسبة إلى عمليات التحميل المسبق للوحدات من مصادر مختلفة، أدرج crossorigin="anonymous". فهذا يطابق وضع الجلب الافتراضي لـ <script type="module">، ويضمن إعادة استخدام النسخة المحمّلة مسبقًا بدلًا من جلبها مرة أخرى من دون ترويسات CORS.

دعم المتصفحات

تدعم Chrome/Edge/Safari وFirefox الحديثة modulepreload. وفي إصدارات Firefox الأقدم، يُتجاهل بصمت؛ وتظل الوحدات تعمل، ولكن من دون فائدة التحميل المسبق. ولا حاجة إلى polyfill؛ فأقصى ما قد يحدث هو تحميل أبطأ قليلًا في المتصفحات القديمة.

الحد من حجم الرسم البياني

يؤدي التحميل المسبق لمئات الوحدات إلى هدر النطاق الترددي على تعليمات برمجية قد لا ينفذها المستخدم مطلقًا. حمّل مسبقًا أجزاء الدخول على مستوى المسار فقط، لا الأجزاء التي تُحمّل كسولًا على مستويات عميقة. واعتمد على prefetch أو import on demand لمسارات التعليمات البرمجية قليلة الاستخدام.

دمجه مع التلميحات الأخرى

بالنسبة إلى الصور والخطوط الموجودة في head نفسه، اخلط بينها بحرية: استخدم preconnect لشبكات CDN التابعة لجهات خارجية، وpreload للخطوط المهمة، وmodulepreload لوحدات الدخول، وprefetch لأصول الصفحة التالية. ولا تتداخل هذه التلميحات مع بعضها.

التحقق

تحقق من لوحة Network: عند استخدام modulepreload، تظهر عمليات استيراد المستوى الثاني كطلبات متوازية تبدأ تقريبًا في الوقت نفسه مع وحدة الدخول. ومن دونه، تظهر متتابعة، إذ يبدأ كل طلب فقط بعد انتهاء تحليل الوحدة الأصلية.

اختبار المعرفة

ما الذي يفعله modulepreload ولا يفعله preload عادي للملف نفسه؟

ملخص

يلغي modulepreload سلسلة التحميل المتتابعة لوحدات ES، إذ يجلب وحدة الدخول وعمليات استيرادها بالتوازي قبل التنفيذ. ضعه مبكرًا داخل <head>، وأنشئه من رسم البناء، واضبط crossorigin للوحدات من مصادر مختلفة، وحدد نطاقه بنقاط الدخول للمسارات لتجنب هدر النطاق الترددي.

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

هل درس «تلميحات الموارد modulepreload» مجاني؟

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

ماذا ستتعلم في «تلميحات الموارد modulepreload»؟

تحميل وحدات ES مسبقًا لتسريع بدء تشغيل JavaScript تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «تلميحات الموارد modulepreload»؟

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

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

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

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

← العودة إلى HTML Academy