الأدوات التي يجب استخدامها لتتبُّع حزمة Webpack وتحليلها
حتى عند تهيئة حزمة الويب لجعل التطبيق صغيرًا قدر الإمكان، لا يزال من الضروري تتبعه ومعرفة مضمونه. بخلاف ذلك، يمكنك تثبيت تبعية تجعل التطبيق أكبر مرتين، ولن تلاحظه حتى!
يصف هذا القسم الأدوات التي تساعدك على فهم الحزمة.
تتبُّع حجم الحزمة
لمراقبة حجم تطبيقك، استخدِم لوحة بيانات 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 لتلقّي إشعار عندما يصبح التطبيق كبيرًا جدًا:
ولضبطها:
معرفة الأحجام القصوى
حسِّن التطبيق ليكون صغيرًا قدر الإمكان. تنفيذ إصدار الإنتاج.
أضف قسم
bundlesize
إلىpackage.json
مع المحتوى التالي:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
تنفيذ
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
أضف 10-20% إلى كل مقاس، وستحصل على الحد الأقصى للمقاسات. سيسمح لك هذا الهامش الذي يتراوح بين 10 و20% بتطوير التطبيق كالمعتاد بينما يحذرك عندما يزداد حجمه بشكل كبير.
تفعيل
bundlesize
تثبيت حزمة
bundlesize
كتبعية للتطوير:npm install bundlesize --save-dev
في القسم
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", } ] }
أضِف نصًا برمجيًا لبروتوكول npm لتشغيل عملية التحقّق:
// package.json { "scripts": { "check-size": "bundlesize" } }
اضبط CI لتنفيذ
npm run check-size
في كل عملية دفع. (ويمكنك دمجbundlesize
مع GitHub إذا كنت بصدد تطوير المشروع عليه).
هذا كل شيء. إذا شغّلت npm run check-size
أو دفعت الرمز، سيظهر لك ما إذا كانت ملفات الإخراج صغيرة بما يكفي:
وفي حال حدوث إخفاق:
قراءات إضافية
تحليل سبب كبر حجم الحزمة
ننصحك بالتعمّق في تفاصيل الحزمة لمعرفة الوحدات التي تشغل مساحة فيها. تطبيق تحليل حزمة webpack على Meet:
يفحص 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 لأنها أقرب إلى تجربة المستخدمين الحقيقية؛ استخدم الشريط الجانبي على اليمين لتبديل الأحجام.
إليك ما يجب البحث عنه في التقرير:
- التبعيات الكبيرة: لماذا هي كبيرة جدًا؟ هل هناك بدائل أصغر (على سبيل المثال، التصرف بدلاً من التفاعل)؟ هل تستخدم كل التعليمات البرمجية التي يتضمنها (على سبيل المثال، يتضمن Moment.js الكثير من اللغات التي لا يتم استخدامها غالبًا وقد يتم تجاهلها)؟
- التبعيات المكرّرة: هل ترى المكتبة نفسها تتكرر في ملفات متعددة؟ (استخدِم على سبيل المثال الخيار
optimization.splitChunks.chunks
في حزمة الويب 4 أوCommonsChunkPlugin
في حزمة الويب 3 لنقله إلى ملف مشترك.) أو هل تحتوي الحزمة على إصدارات متعددة من نفس المكتبة؟ - التبعيات المتشابهة: هل هناك مكتبات مماثلة تؤدي الوظيفة نفسها تقريبًا؟ (على سبيل المثال،
moment
وdate-fns
، أوlodash
وlodash-es
.) حاول التمسك بأداة واحدة.
يمكنك أيضًا الاطّلاع على التحليل الرائع لحِزم حِزم الويب الذي يقدّمه "شون لاركن".
التلخيص
- يمكنك استخدام
webpack-dashboard
وbundlesize
لمتابعة حجم تطبيقك. - تعرَّف على معلومات أكثر تفصيلاً مما يزيد من المقاس باستخدام
webpack-bundle-analyzer
.