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

الأدوات التي يجب استخدامها لتتبُّع حِزمة webpack وتحليلها

Ivan Akulov

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

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

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

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

لوحة بيانات Webpack

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

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

لتفعيل هذه الميزة، ثبِّت حزمة 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

تتحقّق bundlesize من أنّ مواد عرض webpack لا تتجاوز الأحجام المحدّدة. دمج واجهة برمجة التطبيقات 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 أو دفعت الرمز، سترى ما إذا كانت ملفات الإخراج صغيرة بما يكفي:

أو في حال حدوث أخطاء:

مراجع إضافية

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

تحليل سبب حجم الحزمة الكبير

قد تحتاج إلى التعمّق في الحزمة لمعرفة الوحدات التي تشغل مساحة فيها. ‫Meet webpack-bundle-analyzer:

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

ولاستخدام أداة التحليل، عليك تثبيت حزمة 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 لأنّها أقرب إلى ما يواجهه المستخدمون الحقيقيون. استخدِم الشريط الجانبي على يمين الصفحة للتبديل بين الأحجام.

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

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

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

ملخّص

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