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

يجعل npm إضافة التعليمات البرمجية إلى مشروعك أمرًا سهلاً. لكن هل تستخدم حقًا كل وحدات البايت الإضافية هذه؟

لقد حوّلت قواعد بيانات المسجّلين مثل npm من عالم JavaScript للأفضل من خلال السماح لأي مستخدم بتنزيل أكثر من نصف مليون حزمة عامة واستخدامها بسهولة. لكننا غالبًا ما نقوم بتضمين المكتبات التي لا نستخدمها بالكامل. لحلّ هذه المشكلة، يمكنك تحليل الحزمة لرصد الرموز البرمجية غير المستخدَمة. ثم أزِل المكتبات غير المستخدمة وغير الضرورية.

التأثير في "مؤشرات أداء الويب الأساسية"

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

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

سيساعدك هذا الدليل في التعامل مع الرموز غير المستخدَمة في مشروعك من خلال توضيح كيفية تحليل قاعدة الرموز الخاصة بمشروعك وتقديم استراتيجيات لقص الرمز غير المستخدَم من مواد عرض JavaScript التي تشحنها إلى المستخدمين أثناء عملية الإنتاج.

تحليل الحزمة

تسهّل "أدوات مطوري البرامج" الاطّلاع على حجم جميع طلبات الشبكة:

  1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
  2. انقر على علامة التبويب الشبكة.
  3. ضع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت.
  4. إعادة تحميل الصفحة

لوحة الشبكة التي تحتوي على طلب حزمة

ستخبرك علامة التبويب التغطية في "أدوات مطوري البرامج" أيضًا بمدى عدم استخدام رموز CSS وJS في تطبيقك.

تغطية الرمز البرمجي في "أدوات مطوري البرامج"

من خلال تحديد إعدادات Lighthouse الكاملة من خلال Node CLI (واجهة سطر الأوامر للعقدة)، يمكن أيضًا استخدام تدقيق "Unused JavaScript" (JavaScript غير المستخدَم) لتتبّع مقدار الرمز غير المستخدَم الذي يتم شحنه مع تطبيقك.

تدقيق لغة JavaScript غير المستخدَمة في Lighthouse

إذا كنت تستخدم webpack كحزمة، ستساعدك أداة Webpack Bundle Builder في استكشاف مكوّنات الحزمة. ضمِّن المكون الإضافي في ملف تهيئة Webpack مثل أي مكون إضافي آخر:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

على الرغم من استخدام حزمة الويب بشكل شائع لإنشاء تطبيقات من صفحة واحدة، إلا أنّ حِزم البرامج الأخرى، مثل Parcel وRollup، تحتوي أيضًا على أدوات عرض مرئي يمكنك استخدامها لتحليل الحزمة.

تعرض إعادة تحميل التطبيق مع تضمين هذا المكوّن الإضافي خريطة هيكلية قابلة للتكبير/التصغير للحزمة بأكملها.

أداة تحليل حزمة Webpack

يتيح لك استخدام هذا التصور فحص أجزاء الحزمة الأكبر من غيرها، بالإضافة إلى الحصول على فكرة أفضل عن جميع المكتبات التي تستوردها. يمكن أن يساعد ذلك في تحديد ما إذا كنت تستخدم أي مكتبات غير مستخدمة أو غير ضرورية.

إزالة المكتبات غير المستخدمة

في صورة مخطط الشجرة السابقة، هناك عدد قليل جدًا من الحِزم ضمن نطاق @firebase واحد. إذا كان موقعك الإلكتروني لا يحتاج سوى مكوّن قاعدة بيانات firebase، فيمكنك تحديث عمليات الاستيراد لاسترجاع تلك المكتبة:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

من المهم التأكيد على أنّ هذه العملية أكثر تعقيدًا بالنسبة إلى التطبيقات الأكبر حجمًا.

بالنسبة للحزمة ذات المظهر الغامض التي أنت متأكد تمامًا من عدم استخدامها في أي مكان، خذ خطوة إلى الوراء وانظر إلى أي من التبعيات عالية المستوى تستخدمها. حاول إيجاد طريقة لاستيراد المكونات التي تحتاجها منه فقط. إذا كنت لا تستخدم مكتبة، يُرجى إزالتها. إذا لم تكن المكتبة مطلوبة للتحميل الأول للصفحة، ننصحك بالتفكير في ما إذا كان يمكن التحميل الكسول.

وفي حال كنت تستخدم حزمة الويب، يمكنك الاطّلاع على قائمة المكوّنات الإضافية التي تزيل تلقائيًا الرموز غير المستخدَمة من المكتبات الشائعة.

إزالة المكتبات غير الضرورية

لا يمكن تقسيم جميع المكتبات بسهولة إلى أجزاء واستيرادها بشكل انتقائي. في هذه السيناريوهات، ضع في اعتبارك ما إذا كان من الممكن إزالة المكتبة بالكامل. يجب أن يكون إنشاء حل مخصّص أو الاستفادة من بديل أخف خيارات جديرة بالنظر. ومع ذلك، من المهم حساب التعقيد والجهد المطلوبين لأي من هذه الجهود قبل إزالة مكتبة بالكامل من التطبيق.