استدعاء ملفات JavaScript عند الحاجة فقط لتحسين أداء موقعك

🧠 يعني إيه Dynamic Import؟

الديناميـك إمبورت ببساطة هو إنك تحمّل ملف أو موديول JavaScript "وقت الحاجة بس" مش من أول الصفحة. الميزة دي بتقلل حجم الباندل الأساسي، وبتسرّع تحميل الصفحة بشكل كبير، وبتخلي تجربة المستخدم أكثر سلاسة.

💡 مثال عملي: تحميل موديول جرافيك عند الضغط

هنفترض إن عندنا زرار "تحميل رسم بياني"، والوظيفة دي مش دايمًا المستخدم هيستخدمها، فليه نحملها من الأول؟ نحمّلها وقت ما يضغط:

<button class="btn btn-outline-dark" id="loadChart">تحميل الرسم البياني</button>

<script>
  document.getElementById("loadChart").addEventListener("click", async () => {
    const module = await import("./charts.js");
    const {{ showChart }} = module;

    if (typeof showChart === "function") {
      showChart(); // دي الدالة المسؤولة عن عرض الرسم البياني
    } else {
      console.error("showChart مش موجودة أو مش دالة في charts.js");
    }
  });
</script>

ملحوظة: لازم ملف charts.js يكون فيه الدالة متصدّرة كده:

// charts.js
export function showChart() {
  alert("الرسم البياني تم تحميله بنجاح!");
}

📨 مثال متقدم: تحميل موديول معالجة فورم عند الإرسال

مش لازم تحمّل كود معالجة الفورم إلا لما المستخدم يبعت الفورم فعلًا، وده مثال عملي:

<form id="contactForm">
  <input type="text" name="name" placeholder="اسمك" required />
  <button type="submit">إرسال</button>
</form>

<script>
  document.getElementById("contactForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    const module = await import("./formHandler.js");
    const {{ processForm }} = module;

    if (typeof processForm === "function") {
      processForm(new FormData(e.target));
    } else {
      console.error("processForm مش موجودة في formHandler.js");
    }
  });
</script>

والموديول يكون كده:

// formHandler.js
export function processForm(formData) {
  const name = formData.get("name");
  alert("تم استلام البيانات: " + name);
}

⚡ طب ليه ده مهم؟

• ⏱️ بيقلل وقت تحميل الصفحة الأولى بشكل كبير.
• 📦 بيوفر في حجم الجافاسكريبت المحمّل، خصوصًا في الموبايل.
• 📈 بيرفع تقييم موقعك في أدوات قياس الأداء زي Google Lighthouse وCore Web Vitals.
• 🧠 بيساعد في تقسيم الكود بشكل ذكي وسهل للصيانة.