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

المدونة

تاريخ React – استعراض شامل وتحليل تقني

يوليو 26, 2025

1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...

نظرة معمقة على Laravel Context: تسجيل وتحليل السياق البرمجي باحترافية

يوليو 20, 2025

في Laravel 12، تم تقديم Laravel Context كأداة قوية بتخلي تتبع الطلبات، تسجيل الأخطاء، وتحليل سلوك الوظائف الخلفية أسهل وأدق من أي وقت فات. وده بيحصل ع...

نظام طوابير Laravel واستخدام Supervisor في الإنتاج

يوليو 01, 2025

🚀 نظام Queue &amp; Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...

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

يوليو 20, 2025

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

دليل للأنيميشن المتحركة بالسكّول بس بـ CSS

يونيو 26, 2025

دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت &mdash; كله CSS بحت. 1. التلات مكونات بتوع...

استكشف أقوى تقنيات Laravel الحديثة: Inertia.js، View Creators، وHLS خطوة بخطوة

يوليو 27, 2025

أدوات قوية تقدر تستخدمها لتطوير تطبيقات Laravel بشكل احترافي: Inertia.js v2، وView Creators، وحزمة Laravel HLS لبث الفيديوهات بأمان. ١. Inertia.j...

The Ultimate Managed Hosting Platform