إزالة محتوى JavaScript غير المستخدَم

يمكن أن تؤدي لغة JavaScript غير المستخدمة إلى إبطاء سرعة تحميل الصفحة:

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

كيفية تعذُّر تدقيق JavaScript غير المستخدَم

تضع Lighthouse علامة على كل ملف JavaScript يحتوي على أكثر من 20 كيبيبايت من الرموز غير المستخدَمة:

لقطة شاشة لعملية التدقيق
انقر على قيمة في عمود عنوان URL لفتح رمز مصدر النص البرمجي في علامة تبويب جديدة.

كيفية إزالة محتوى JavaScript غير المستخدَم

رصد محتوى JavaScript غير المستخدَم

يمكن أن تقدّم لك علامة التبويب "التغطية" في "أدوات مطوري البرامج في Chrome" تحليلاً مفصّلاً للرموز غير المستخدَمة.

يمكن أن تساعدك الفئة Coverage في Puppeteer في برمجة عملية رصد الرموز غير المستخدَمة واستخراج الرموز المستخدَمة.

أداة تصميم لإتاحة إزالة الرموز غير المستخدَمة

أجرِ اختبارات Tooling.Report التالية لمعرفة ما إذا كانت أداة الحِزم متوافقة مع الميزات التي تسهّل تجنُّب الرموز غير المستخدَمة أو إزالتها:

إرشادات خاصة بحِزم البيانات

Angular

إذا كنت تستخدم Angular CLI، يُرجى تضمين خرائط المصدر في إصدار الإنتاج لفحص الحِزم.

Drupal

يمكنك إزالة أصول JavaScript غير المستخدمة وإرفاق مكتبات Drupal المطلوبة فقط بالصفحة ذات الصلة أو بالمكوِّن ذي الصلة في الصفحة. راجِع القسم تعريف مكتبة للحصول على التفاصيل.

Joomla

يمكنك تقليل عدد إضافات Joomla التي تُحمِّل JavaScript غير المستخدَم في صفحتك أو تبديلها.

Magento

أوقِف حزمة JavaScript المدمجة في Magento.

تفاعل

في حال عدم العرض من جهة الخادم، يمكنك تقسيم حِزم JavaScript باستخدام React.lazy(). بخلاف ذلك، يمكن تقسيم الرمز باستخدام مكتبة تابعة لجهة خارجية، مثل المكوّنات القابلة للتحميل.

فيو

في حال عدم استخدام العرض من جهة الخادم واستخدام جهاز توجيه Vue، يمكنك تقسيم الحزم حسب مسارات التحميل الكسول.

WordPress

يمكنك تقليل عدد مكوّنات WordPress الإضافية التي تُحمِّل لغة JavaScript غير المُستخدَمة في صفحتك أو تبديلها.

المراجِع