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

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

إيفان أكولوف

Twitter GitHub الصفحة الرئيسية

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

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

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

لمراقبة حجم تطبيقك، استخدِم لوحة بيانات Webpack أثناء عملية التطوير وحجم الحزمة على CI.

لوحة بيانات حزمة الويب

تعمل لوحة بيانات 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 على Meet:

(تسجيل الشاشة من github.com/webpack-contrib/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 لأنها أقرب إلى تجربة المستخدمين الحقيقية؛ استخدم الشريط الجانبي على اليمين لتبديل الأحجام.

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

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

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

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

التلخيص

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