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