1. تصغير وضغط ملفات جافا سكريبت

يؤدي تصغير ملفات JavaScript إلى إزالة الأحرف غير الضرورية مثل المسافات البيضاء والتعليقات وفواصل الأسطر دون تغيير وظائفها. يؤدي هذا إلى تقليل حجم الملف وتحسين أوقات التحميل.

مثال:
قبل التصغير:

function greetUser(name) {
    console.log('Hello, '   name   '!');
}

بعد التصغير:

function greetUser(name){console.log("Hello, " name "!")}

أدوات التصغير:

• UglifyJS
• مختصر
• مترجم إغلاق جوجل

2. استخدم التحميل غير المتزامن

يضمن تحميل ملفات JavaScript بشكل غير متزامن أن تحميل البرامج النصية لا يمنع عرض الصفحة. يمكن تحقيق ذلك باستخدام السمة غير المتزامنة في علامة "البرنامج النصي" الخاصة بك.

مثال:

3. قم بتأجيل جافا سكريبت غير الهامة

يسمح تأجيل JavaScript غير المهمة للمتصفح بتحميل HTML وCSS أولاً، مما يؤدي إلى تحسين وقت التحميل الأولي للصفحة. استخدم سمة التأجيل لتحقيق ذلك.

مثال:

4. تقسيم الكود والتحميل البطيء

يمكن أن يؤدي تقسيم كود JavaScript إلى أجزاء أصغر وتحميلها عند الحاجة فقط إلى تقليل أوقات التحميل الأولية بشكل كبير. يمكن القيام بذلك باستخدام حزم الوحدات النمطية مثل Webpack.

مثال مع Webpack:

// Dynamic import of moduleA
import(/* webpackChunkName: "moduleA" */ './moduleA').then(module => {
    module.default();
});

5. تحسين وتقليل التبعيات

مراجعة التبعيات وتحسينها. قم بإزالة المكتبات غير المستخدمة وفكر في استبدال المكتبات الثقيلة ببدائل أخف.

مثال:
استبدال moment.js (65 كيلو بايت) بـ date-fns (12 كيلو بايت) لمهام معالجة التاريخ.

6. تنفيذ اهتزاز الشجرة

هز الشجرة هو أسلوب لإزالة التعليمات البرمجية الميتة من حزم JavaScript الخاصة بك. يتم استخدامه عادةً مع حزم الوحدات النمطية مثل Webpack وRollup.

module.exports = {
    mode: 'production',
    optimization: {
        usedExports: true,
    },
};

7. استخدم شبكة توصيل المحتوى (CDN)

يمكن أن تؤدي خدمة ملفات JavaScript الخاصة بك من CDN إلى تقليل زمن الوصول عن طريق تسليم الملفات من موقع أقرب إلى المستخدم. توفر شبكات CDN أيضًا فوائد إضافية مثل التخزين المؤقت المحسن.

مثال:

8. تخزين ملفات جافا سكريبت مؤقتًا

يمكن أن يؤدي الاستفادة من التخزين المؤقت للمتصفح لملفات JavaScript إلى تقليل أوقات التحميل للمستخدمين العائدين بشكل كبير. يمكنك تعيين رؤوس التخزين المؤقت على الخادم الخاص بك لتوجيه المتصفح للتخزين المؤقت لملفات JavaScript الخاصة بك.

إعداد رؤوس التحكم في ذاكرة التخزين المؤقت:

لتعيين رؤوس التحكم في ذاكرة التخزين المؤقت، تحتاج إلى تكوين خادم الويب الخاص بك. فيما يلي أمثلة لخوادم الويب المختلفة:

أباتشي:
في ملف htaccess الخاص بك:

  ExpiresActive On
  ExpiresByType application/javascript "access plus 1 year"


  
    Header set Cache-Control "public, max-age=31536000"
  

إنجينكس:
في nginx.conf أو داخل كتلة الخادم:

location ~* \.js$ {
  expires 1y;
  add_header Cache-Control "public, max-age=31536000";
}

اكسبرس (Node.js):
في تكوين الخادم الخاص بك:

const express = require('express');
const app = express();

app.use(express.static('public', {
  maxAge: '1y'
}));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

9. تحسين ملفات الصور والوسائط

تأكد من تحسين الصور وملفات الوسائط وحجمها المناسب لتقليل الحمولة الإجمالية لتطبيق الويب الخاص بك.

مثال:
استخدام الصور المستجيبة مع srcset:

10. مراقبة وتحليل الأداء

قم بمراقبة أداء تطبيق الويب الخاص بك وتحليله بانتظام باستخدام أدوات مثل Lighthouse وWebPageTest وأدوات مطور المتصفح. وهذا يساعدك على تحديد ومعالجة اختناقات الأداء.

يعد تحسين أوقات تحميل JavaScript عملية مستمرة تتطلب مراقبة وتعديلًا منتظمًا. من خلال تنفيذ هذه الاستراتيجيات التي أثبتت جدواها، يمكنك تحسين أداء تطبيقات الويب الخاصة بك بشكل كبير، مما يوفر تجربة أسرع وأكثر متعة للمستخدمين.

تذكر أن موقع الويب سريع التحميل لا يعزز تجربة المستخدم فحسب، بل يؤثر أيضًا بشكل إيجابي على تصنيفات تحسين محركات البحث (SEO) ومعدلات التحويل. ابق على اطلاع بأحدث الاتجاهات والأدوات للحفاظ على أداء JavaScript في أعلى مستوياته.