مراقبة التطبيق وتحليله

ما الأدوات التي يمكن استخدامها لتتبع وتحليل حزمة الويب

Ivan Akulov

حتى عند تهيئة حزمة الويب لجعل التطبيق صغيرًا قدر الإمكان، لا يزال من المهم الحفاظ وتتبعها ومعرفة ما تتضمنه. وإلا، يمكنك تثبيت تبعية تجعل حجم التطبيق ضعف الحجم - ولن يلاحظه حتى!

يصف هذا القسم الأدوات التي تساعدك على فهم حزمتك.

تتبُّع حجم الحزمة

لمراقبة حجم تطبيقك، استخدم webpack-dashboard خلال مرحلة التطوير bundlesize في CI.

webpack-dashboard

webpack-dashboard لتحسين نتائج Webpack مع أحجام التبعيات والتقدم والتفاصيل الأخرى. إليك كيف سيبدو الفيديو:

تساعد لوحة المعلومات هذه في تتبع الاعتماديات الكبيرة - فإذا أضفت واحدة، ستظهر لك على الفور في قسم الوحدات.

لتفعيل الميزة، عليك تثبيت حزمة webpack-dashboard:

npm install webpack-dashboard --save-dev

وأضِف المكوّن الإضافي إلى قسم plugins في الإعدادات:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

أو تستخدم compiler.apply() إذا كنت تستخدم خادم مطوّر مستند إلى Express:

compiler.apply(new DashboardPlugin());

لا تتردد في اللعب باستخدام لوحة المعلومات للعثور على الأماكن المحتملة للتحسين! على سبيل المثال: انتقِل إلى قسم الوحدات للعثور على المكتبات الكبيرة جدًا التي يمكن استبدالها بدائل أصغر.

حجم الحِزمة

تتأكّد bundlesize من عدم تجاوز مواد عرض حزمة الويب. الأحجام المحددة. دمج واجهة برمجة التطبيقات CI لتلقّي الإشعارات عندما يصبح التطبيق كبيرًا جدًا:

لضبطها، يُرجى اتّباع الخطوات التالية:

معرفة الحد الأقصى للأحجام

1. تحسين التطبيق لجعله صغيرًا قدر الإمكان. تشغيل إصدار الإنتاج

2. أضِف القسم bundlesize إلى package.json مع إضافة ما يلي المحتوى:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. تنفيذ bundlesize باستخدام npx:

   npx bundlesize
   

   سيؤدي هذا إلى طباعة الحجم المضغوط gzip لكل ملف:

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. أضف نسبة تتراوح بين %10 و%20 لكل حجم، وستحصل على أقصى المقاسات. سيسمح لك هذا الهامش بنسبة 10-20٪ تطوير التطبيق كالمعتاد مع تحذيرك عندما يكبر حجمه كثيرًا.

   تفعيل bundlesize

5. تثبيت الحزمة bundlesize كتبعية للتطوير:

   npm install bundlesize --save-dev
   

6. في القسم bundlesize من package.json، حدِّد ما تريد الحد الأقصى للأحجام. بالنسبة إلى بعض الملفات (مثل الصور)، قد تحتاج إلى تحديد الحد الأقصى لحجم كل ملف. النوع، وليس لكل ملف:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. أضِف نصًا برمجيًا بتنسيق npm لتشغيل عملية التحقّق:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. يمكنك ضبط ميزة CI لتنفيذ الدالة npm run check-size في كل عملية دفع. (ويمكنك دمج bundlesize مع GitHub إذا كنت تطوّر المشروع بناءً على ذلك.)

هذا كل شيء. الآن، إذا شغّلت npm run check-size أو أرسلت الرمز، سترى ما إذا كانت ملفات الإخراج صغيرًا بما يكفي:

أو، في حال حدوث إخفاقات:

محتوى إضافي للقراءة

• أليكس راسل عن الوقت الفعلي للتحميل الذي يجب الهدف

حلِّل سبب حجم الحزمة بشكل كبير.

ننصحك بالتعمّق أكثر في الحزمة لمعرفة الوحدات التي تشغل مساحة فيها. أراك webpack-bundle-analyzer:

يفحص تحليل webpack-bundle-bundle الحزمة وإنشاء تصورٍ لما بداخلها. استخدام هذه المسودة والتصور للعثور على تبعيات كبيرة أو غير ضرورية.

ولاستخدام أداة التحليل، عليك تثبيت حزمة webpack-bundle-analyzer:

npm install webpack-bundle-analyzer --save-dev

إضافة مكون إضافي إلى تهيئة webpack:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

وتشغيل إصدار الإنتاج. سيفتح المكوّن الإضافي صفحة الإحصاءات في أحد المتصفحات.

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

إليك ما يجب البحث عنه في التقرير:

• التبعيات الكبيرة: لماذا هي كبيرة جدًا؟ هل هناك بدائل أصغر (على سبيل المثال، تأثير بدلاً من React)؟ هل تستخدم كل الرموز البرمجية المضمنة فيه (على سبيل المثال، يحتوي Moment.js على الكثير من اللغات التي لا يتم استخدامها غالبًا ويمكن تجاهلها)؟
• التبعيات المكرّرة: هل ترى نفس المكتبة تتكرر في عدة ملفات؟ (الاستخدام، على سبيل المثال، الخيار optimization.splitChunks.chunks – في حزمة الويب 4 – أو CommonsChunkPlugin – في webpack 3، لنقله إلى ملف عام). أم أن للحزمة إصدارات متعددة من نفس المكتبة؟
• تبعيات مماثلة: هل هناك مكتبات مماثلة تؤدي نفس المهمة تقريبًا؟ (مثال: moment وdate-fns، أو lodash وlodash-es). جرِّب الالتزام بأداة واحدة.

يمكنك أيضًا الاطّلاع على التحليل الرائع لمحتوى حزمة الويب والذي أنشأه "شون لاركين" حِزم.

الملخص

• يمكنك استخدام webpack-dashboard وbundlesize لمتابعة حجم تطبيقك
• تعرَّف على التفاصيل التي تزيد حجم المقاس باستخدام "webpack-bundle-analyzer".