يمكن أن تؤدي لغة JavaScript غير المستخدَمة إلى إبطاء سرعة تحميل صفحتك:
- إذا كانت لغة JavaScript render-blocking، على المتصفّح تنزيل النص البرمجي وتحليله وتجميعه وتقييمه قبل أن يتمكّن من متابعة كل الإجراءات الأخرى اللازمة لعرض الصفحة.
- حتى إذا كان JavaScript غير متزامن (لا يمنع العرض)، يتنافس الرمز البرمجي مع الموارد الأخرى على عرض النطاق أثناء تنزيله، ما يؤدي إلى تأثيرات كبيرة في الأداء. كما أن إرسال التعليمات البرمجية غير المستخدمة عبر الشبكة يعد مضيعةً لمستخدمي الأجهزة المحمولة الذين ليس لديهم خطط بيانات غير محدودة.
أسباب تعذُّر تدقيق JavaScript غير المستخدَم
يُعلِم Lighthouse بكل ملف JavaScript يحتوي على أكثر من 20 كيلوبايت من الرموز غير المستخدَمة:
كيفية إزالة JavaScript غير المستخدَم
رصد محتوى JavaScript غير المستخدَم
يمكن أن تقدّم لك علامة التبويب "تغطية" في "أدوات مطوّري البرامج في Chrome" تحليلاً سطراً تلو الآخر للرموز البرمجية غير المستخدَمة.
يمكن أن تساعدك فئة Coverage
في Puppeteer على التشغيل الآلي لمحاولة
رصد الرمز البرمجي غير المستخدَم واستخراج الرمز البرمجي المستخدَم.
إنشاء أداة لدعم إزالة الرموز غير المستخدَمة
اطّلِع على اختبارات Tooling.Report التالية لمعرفة ما إذا كان أداة تجميع الحِزم تتيح ميزات تسهِّل تجنُّب الرموز البرمجية غير المستخدَمة أو إزالتها:
إرشادات خاصة بالمجموعة
Angular
إذا كنت تستخدم Angular CLI، يُرجى تضمين خرائط المصدر في إصدار الإنتاج لفحص الحِزم.
Drupal
يمكنك إزالة أصول JavaScript غير المستخدمة وإرفاق مكتبات Drupal
المطلوبة فقط بالصفحة ذات الصلة أو بالمكوّن ذي الصلة في الصفحة. راجِع مستندات Drupal للحصول على التفاصيل. لتحديد المكتبات المرفقة التي تضيف لغة JavaScript دخيلة، يمكنك محاولة تشغيل تغطية الرمز البرمجي في "أدوات مطوري البرامج في Chrome". يمكنك تحديد المظهر أو الوحدة المسؤولة من عنوان URL للنص البرمجي عندما يكون تجميع JavaScript قيد الإيقاف في موقعك الإلكتروني على Drupal
. يمكنك البحث عن التصاميم أو الوحدات التي تحتوي على العديد من النصوص البرمجية في القائمة والتي تتضمن الكثير من اللون الأحمر في تغطية الرمز البرمجي. ومن المفترض أن يُرفِق التصميم أو الوحدة مكتبة نصوص برمجية فقط في حال كانت مُستخدَمة في الصفحة.
للاطّلاع على التفاصيل.
Joomla
يمكنك تقليل أو تغيير عدد إضافات Joomla التي تُحمِّل في صفحتك ملفات JavaScript غير المستخدَمة.
Magento
أوقِف حزمة JavaScript المدمجة في Magento.
React
إذا لم يكن العرض من جهة الخادم، يمكنك تقسيم حِزم JavaScript باستخدام React.lazy()
.
بخلاف ذلك، يمكن تقسيم الرمز باستخدام مكتبة تابعة لجهات خارجية، مثل
المكوّنات القابلة للتحميل.
Vue
في حال عدم العرض من جهة الخادم واستخدام جهاز توجيه Vue، قسِّم الحزم حسب مسارات التحميل الكسول.
WordPress
يمكنك تقليل عدد مكونات WordPress الإضافية التي تُحمِّل في صفحتك ملفات JavaScript غير المستخدَمة أو تبديلها.
الموارد
- رمز المصدر لتدقيق إزالة الرمز غير المستخدَم
- إزالة الرمز غير المستخدَم
- إضافة تفاعل باستخدام JavaScript
- تقسيم الرموز البرمجية
- إزالة الرموز البرمجية غير الصالحة
- رمز مستورَد غير صالح
- العثور على رمز JavaScript وCSS غير المستخدَم باستخدام علامة التبويب "التغطية" في "أدوات مطوري البرامج في Chrome"
- class:
Coverage