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

يوليو 24, 2025

🧠 يعني إيه 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.
  • 🧠 بيساعد في تقسيم الكود بشكل ذكي وسهل للصيانة.

المدونة

إزاي تستخدم Web Components ببساطة وذكاء

يوليو 06, 2025

إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...

الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 06, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...

الفرق بين Redux, Context & React Components في إدارة الحالة

أغسطس 06, 2025

عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...

Laravel 12.19: استخدام Attributes لتنظيم الـ Query Builder

يوليو 07, 2025

Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...

لارافيل 12: كل جديد من 12.0 لـ 12.19 – دليل شامل

يوليو 20, 2025

🔧 1. لارافيل&nbsp;12.0 &ndash; ستارتر كيتس وتعديلات أساسية إصدار 12.0 جاب Starter Kits جاهزة للـ React، Vue، Livewire، وكمان دمج مع WorkOS AuthKit،...

إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...