ساهمت أنظمة التسجيل، مثل npm، في تحسين عالم JavaScript من خلال السماح لأي مستخدمٍ بتحميل واستخدام أكثر من نصف مليون حزمة علنية. لكننا غالبًا ما نقوم بتضمين المكتبات التي لا نستخدمها بشكل كامل. لحلّ هذه المشكلة، يمكنك تحليل الحِزمة لرصد الرموز غير المستخدَمة، ثم إزالة المكتبات غير المستخدَمة وغير الضرورية.
التأثير في "مؤشرات أداء الويب الأساسية"
من خلال إزالة الرموز غير المستخدَمة، يمكنك تحسين مؤشرات أداء الويب الأساسية لموقعك الإلكتروني. على سبيل المثال، يمكن أن يتأثّر مقياس سرعة عرض أكبر جزء من المحتوى على الصفحة برمز غير مستخدَم عندما تتنافس مواد العرض الكبيرة غير الضرورية على عرض النطاق مع موارد أخرى. يمكن أن يتأثّر مقياس LCP أيضًا إذا كانت مواد عرض JavaScript الكبيرة التي تعرِض الترميز على العميل فقط تحتوي على إشارات إلى ملفات LCP من خلال تأخير وقت تحميل هذه الموارد.
يمكن أن يؤثر الرمز غير المستخدَم أيضًا في مدى استجابة الصفحة لتفاعلات المستخدم (INP)، لأنّه حتى JavaScript غير المستخدَم يجب تنزيله وتحليله وتجميعه ثم تنفيذه. يمكن أن يؤدي الرمز غير المستخدَم إلى حدوث تأخيرات غير ضرورية في وقت تحميل الموارد واستخدام الذاكرة ونشاط سلسلة المحادثات الرئيسية، ما يساهم في تقليل سرعة استجابة الصفحة.
يوضّح هذا الدليل كيفية تحليل قاعدة بيانات مشروعك بحثًا عن الرموز غير المستخدَمة، ويقدّم استراتيجية لإزالة الرموز غير المستخدَمة من مواد عرض JavaScript التي ترسلها إلى المستخدمين في مرحلة الإنتاج.
تحليل الحزمة
يمكن أن تعرض لك "أدوات المطوّرين" حجم جميع طلبات الشبكة:
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
- انقر على علامة التبويب الشبكة.
- ضَع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
- إعادة تحميل الصفحة
تُطلعك علامة التبويب التغطية في DevTools أيضًا على مقدار رمز CSS وJS غير المستخدَم في تطبيقك.
من خلال تحديد ضبط Lighthouse بالكامل من خلال واجهة سطر الأوامر للعقدة، يمكنك تنفيذ عملية التدقيق "تقليل محتوى 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، اطّلِع على قائمة المكوّنات الإضافية التي تزيل تلقائيًا الرمز البرمجي غير المستخدَم من المكتبات الرائجة.
إزالة المكتبات غير الضرورية
لا يمكن تقسيم بعض المكتبات إلى أجزاء واستيرادها بشكل انتقائي. في هذه السيناريوهات، ننصحك بالتفكير في إمكانية إزالة المكتبة بالكامل. إنّ إنشاء حلّ مخصّص أو الاستفادة من بديل أخفّ وزنًا يجب أن يكونا دائمًا خيارَين يستحقّان التفكير فيهما. ومع ذلك، من المهمّ تقييم التعقيد والمحاولة المطلوبة لأيّ من هاتين الاستراتيجيتَين قبل إزالة مكتبة تمامًا من تطبيقك.