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

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

Ivan Akulov

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

يوضّح هذا القسم الأدوات التي تساعدك في فهم الحزمة.

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

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

لوحة بيانات Webpack

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

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

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

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

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

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

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

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

• التبعيات الكبيرة: ما سبب حجمها الكبير؟ هل هناك بدائل أصغر حجمًا (مثل 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".