استدعاء ملفات 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.
- 🧠 بيساعد في تقسيم الكود بشكل ذكي وسهل للصيانة.
المدونة
يوليو 31, 2025
Hook useCallback في React يُستخدم لإنشاء نسخة ثابتة من دالة (callback) بحيث لا يُعاد إنشاؤها إلا إذا تغيرت الـ dependencies المحددة. الهدف الأساسي م...
يوليو 01, 2025
تعزيز PHP enums باستخدام حزمة archtechx/enums من PHP 8.1، ظهر نوع جديد اسمه “enums” بيخليك تعرف قيم ثابتة بأسماء مرمّزة زي statuses...
يوليو 20, 2025
في Laravel 12، تم تقديم Laravel Context كأداة قوية بتخلي تتبع الطلبات، تسجيل الأخطاء، وتحليل سلوك الوظائف الخلفية أسهل وأدق من أي وقت فات. وده بيحصل ع...
يونيو 29, 2025
إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...
يوليو 26, 2025
1. البدايات: النشأة داخل Facebook في عام 2011، واجه مهندسو Facebook تحديًا متزايدًا في صيانة واجهات المستخدم المعقدة والتفاعلية. تم تطوير مكتبة د...
يوليو 07, 2025
إتقان التحقق الشرطي في Laravel 12 في Laravel 12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...