استدعاء ملفات 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.
- 🧠 بيساعد في تقسيم الكود بشكل ذكي وسهل للصيانة.
المدونة
فبراير 05, 2026
شرح تحديث Redux Toolkit 2.9.0 إصدار Redux Toolkit 2.9.0 ركّز بشكل أساسي على تحسين أداء RTK Query، وتنظيم طريقة التعامل مع الطلبات غير المتزامنة (...
أغسطس 03, 2025
أصدرت Laravel النسخة 12.21.0 بمزايا برمجية هامة تساهم في كتابة كود أنظف وأسهل في الصيانة. من أهمها دالة whereValueBetween() الجديدة، بالإضافة إلى...
يونيو 30, 2025
أحدث مميزات ECMAScript 2025 في 25 يونيو 2025، تم اعتماد ES2025 رسميًا. الإضافات الجاية هتسهل عليك كتابة الكود: 1. 📦 Import Attributes و JSON Module...
يوليو 01, 2025
🎣 شرح React Hooks وبأمثلة عملية 🧠 useState بيعمل إيه: بيضيف حالة داخلية (state) جوا أي مكون شغال بوظيفة. مثال عملي: import React, { useSta...
يوليو 01, 2025
🚀 نظام Queue & Jobs في Laravel هناخدك خطوة خطوة من أول إنشاء الجداول لحد ما تشغّل الطوابير في Production عن طريق Supervisor. الخطوة 1: إنشاء...
سبتمبر 13, 2025
لو محتاج تبعت إشعارات Push من تطبيق Laravel سواء للموبايل أو للويب، فالحل الأسرع والأبسط هو إنك تستخدم Notifire اللي بيربط Laravel مباشرةً مع Fireba...