ساهمت أنظمة التسجيل، مثل npm، في تحسين عالم JavaScript من خلال السماح لأي مستخدمٍ بتحميل واستخدام أكثر من نصف مليون حزمة علنية. ولكننا غالبًا ما نضيف مكتبات لا نستخدمها بالكامل. لحلّ هذه المشكلة، يمكنك تحليل الحِزمة لرصد الرموز غير المستخدَمة، ثم إزالة المكتبات غير المستخدَمة وغير الضرورية.
التأثير في "مؤشرات أداء الويب الأساسية"
من خلال إزالة الرموز غير المستخدَمة، يمكنك تحسين مؤشرات أداء الويب الأساسية لموقعك الإلكتروني. على سبيل المثال، يمكن أن يتأثّر مقياس سرعة عرض أكبر جزء من المحتوى على الصفحة برمز غير مستخدَم عندما تتنافس مواد العرض الكبيرة غير الضرورية على عرض النطاق مع موارد أخرى. يمكن أن يتأثّر مقياس LCP أيضًا إذا كانت مواد عرض JavaScript الكبيرة التي تعرِض الترميز على العميل فقط تحتوي على إشارات إلى ملفات LCP من خلال تأخير وقت تحميل هذه الموارد.
يمكن أن يؤثر الرمز غير المستخدَم أيضًا في مدى استجابة الصفحة لتفاعلات المستخدم (INP)، لأنّه حتى JavaScript غير المستخدَم يجب تنزيله وتحليله وتجميعه ثم تنفيذه. يمكن أن يؤدي الرمز غير المستخدَم إلى حدوث تأخيرات غير ضرورية في وقت تحميل الموارد واستخدام الذاكرة ونشاط سلسلة المحادثات الرئيسية، ما يساهم في تقليل سرعة استجابة الصفحة.
يوضّح هذا الدليل كيفية تحليل قاعدة بيانات مشروعك بحثًا عن الرموز غير المستخدَمة، ويقدّم بدوره استراتيجيات لإزالة الرموز غير المستخدَمة من مواد عرض JavaScript التي ترسلها إلى المستخدمين في مرحلة الإنتاج.
تحليل الحزمة
يمكن أن تعرض لك "أدوات المطوّرين" حجم جميع طلبات الشبكة:
- اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب الشبكة.
- ضَع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
- إعادة تحميل الصفحة
تُطلعك علامة التبويب التغطية في DevTools أيضًا على مقدار رمز CSS وJS غير المستخدَم في تطبيقك.
من خلال تحديد إعدادات Lighthouse الكاملة من خلال Node CLI، يمكنك تنفيذ فحص "تقليل JavaScript غير المستخدَم" لتتبُّع مقدار الرمز غير المستخدَم الذي يتم إرساله مع تطبيقك.
إذا كنت تستخدِم webpack كأداة تجميع، يمكن أن يساعدك Webpack Bundle Analyzer في التحقيق في العناصر التي تتألف منها الحِزمة. أدرِج المكوّن الإضافي فيملف إعدادات webpack مثل أي مكوّن إضافي آخر:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
على الرغم من أنّ webpack تُستخدَم عادةً لإنشاء تطبيقات الصفحة الواحدة، إلا أنّ أدوات تجميع التطبيقات الأخرى، مثل Parcel وRollup، تتضمّن أيضًا أدوات تصور يمكنك استخدامها لتحليل حِزمة تطبيقك.
يؤدي إعادة تحميل التطبيق مع تضمين هذا المكوّن الإضافي إلى عرض خريطة شجرة قابلة للتكبير/التصغير ل حِزمك بالكامل.
يوضّح هذا المخطّط البصري أجزاء الحِزمة الأكبر حجمًا مقارنةً بالأخرى، ما يتيح لك فهم عدد المكتبات التي يستوردها تطبيقك وحجمها بشكل أفضل. يمكن أن يساعد ذلك في تحديد ما إذا كنت تستخدم أي مكتبات غير مستخدَمة أو غير ضرورية.
إزالة المكتبات غير المستخدمة
في صورة خريطة الشجرة السابقة، هناك عدد كبير من الحِزم ضمن نطاق
@firebase واحد. إذا كان موقعك الإلكتروني يحتاج فقط إلى مكوّن قاعدة بيانات Firebase،
عدِّل عمليات الاستيراد لجلب هذه المكتبة:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
بالنسبة إلى الحزمة التي تبدو غامضة وتكون متأكدًا من عدم استخدامها في أي مكان، يمكنك الرجوع إلى الوراء والاطّلاع على التبعيات من المستوى الأعلى التي تستخدمها. حاوِل العثور على طريقة لاستيراد المكوّنات التي تحتاج إليها فقط. إذا لم تكن تستخدم مكتبة، أزِلها. إذا لم تكن المكتبة مطلوبة لتحميل الصفحة بشكل مبدئي، ننصحك باستخدام ميزة التحميل البطيء للمكتبة.
إذا كنت تستخدم webpack، اطّلِع على قائمة المكوّنات الإضافية التي تزيل تلقائيًا الرمز البرمجي غير المستخدَم من المكتبات الرائجة.
إزالة المكتبات غير الضرورية
لا يمكن تقسيم بعض المكتبات إلى أجزاء واستيرادها بشكل انتقائي. في هذه السيناريوهات، ننصحك بالتفكير في إمكانية إزالة المكتبة بالكامل. إنّ إنشاء حلّ مخصّص أو الاستفادة من بديل أخفّ وزنًا يجب أن يكونا دائمًا خيارَين يستحقّان التفكير فيهما. ومع ذلك، من المهمّ تقييم التعقيد والمحاولة المطلوبة لأيّ من هاتين الاستراتيجيتَين قبل إزالة مكتبة تمامًا من تطبيقك.