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