تجمع Webpack جميع الملفات التي تم استيرادها وتضمّنها في ملف إخراج واحد أو أكثر يُعرف باسم الحِزم. تُعد الحِزم ميزة رائعة، ولكن مع زيادة حجم تطبيقك، سيزداد حجم حِزمك أيضًا. عليك مراقبة أحجام الحِزم للتأكّد من أنّها لا تصبح كبيرة جدًا وتؤثر في المدة التي يستغرقها تحميل تطبيقك. يتيح Webpack ضبط ميزانيات الأداء استنادًا إلى حجم مواد العرض، ويمكنه مراقبة أحجام الحِزم نيابةً عنك.
للاطّلاع على طريقة عملها، إليك تطبيق يحسب الأيام المتبقية حتى رأس السنة. تم إنشاؤه باستخدام React وmoment.js. (تمامًا مثل التطبيقات الواقعية التي تعتمد بشكل متزايد على الأُطر والمكتبات. 😉)
القياس
يتضمّن هذا الدرس التطبيق مجمّعًا باستخدام webpack.
- انقر على إنشاء ريمكس للتعديل لجعل المشروع قابلاً للتعديل.
- انقر على Terminal (ملاحظة: إذا لم يظهر زر Terminal، قد تحتاج إلى استخدام خيار "ملء الشاشة").
- للحصول على قائمة مرمّزة بالألوان للأصول وأحجامها، اكتب
webpack
في وحدة التحكّم.
webpack
يتم تمييز الحزمة الرئيسية باللون الأصفر لأنّ حجمها أكبر من 244 كيلوبايت (250 كيلوبايت).

يتم تفعيل هذه التحذيرات تلقائيًا في وضع الإنتاج، ويبلغ الحدّ التلقائي 244 كيلوبايت غير مضغوطة لكل من مواد العرض ونقاط الدخول (أي مجموعة كل مواد العرض المستخدَمة أثناء التحميل الأوّلي للصفحة).

لن يكتفي Webpack بتحذيرك، بل سيقدّم لك أيضًا اقتراحًا بشأن كيفية تقليل حجم حِزمك. يمكنك الاطّلاع على مزيد من المعلومات حول التقنيات المقترَحة في أساسيات الويب.

تحديد ميزانية أداء مخصّصة
تعتمد ميزانية الأداء المناسبة على طبيعة مشروعك. من الأفضل دائمًا إجراء بحثك الخاص. القاعدة الجيدة هي توفير أقل من 170 كيلوبايت من موارد المسار الحرج المضغوطة أو المصغّرة.
في هذا العرض التوضيحي البسيط، جرِّب أن تكون أكثر تحفظًا واضبط الميزانية على 100 كيلوبايت (97.7 كيلوبايت). في webpack.config.js
، أضِف ما يلي:
module.exports = {
//...
performance: {
maxAssetSize: 100000,
maxEntrypointSize: 100000,
hints: "warning"
}
};
يتم ضبط ميزانية الأداء الجديدة بالبايت:
- 100,000 بايت لمواد العرض الفردية (maxAssetSize)
- 100,000 بايت لنقطة الدخول (maxEntrypointSize)
في هذه الحالة، لا تتوفّر سوى حِزمة واحدة تعمل أيضًا كنقطة دخول.
القيم المحتملة لـ hints هي:
warning
(تلقائي): يعرض رسالة تحذير باللون الأصفر، ولكن يتم اجتياز الإصدار. من الأفضل استخدام هذا الخيار في بيئات التطوير.-
error
: يعرض رسالة خطأ باللون الأحمر، ولكن لا يزال الإصدار ناجحًا. ننصح باستخدام هذا الإعداد في الإصدارات المخصّصة للإنتاج. false
: لا يتم عرض أي تحذيرات أو أخطاء.

تحسين
الغرض من ميزانية الأداء هو تحذيرك بشأن مشاكل الأداء قبل أن يصعب حلّها. تتوفّر دائمًا أكثر من طريقة لإنشاء تطبيق، وبعض التقنيات ستؤدي إلى سرعة أكبر في أوقات التحميل. (يمكنك الاطّلاع على الكثير منها هنا في مقالة تحسين JavaScript). 🤓)
تسهّل الأُطر والمكتبات عمل المطوّرين، ولكن المستخدمين النهائيين لا يهمهم طريقة إنشاء التطبيقات، بل يهمهم أن تكون التطبيقات عملية وسريعة. إذا تبيّن لك أنّك تجاوزت ميزانية الأداء، عليك التفكير في التحسينات الممكنة.
في العالم الحقيقي، يصعب عادةً استبدال أُطر العمل الكبيرة من جهة العميل، لذا من المهم استخدامها بحكمة. من خلال إجراء بعض البحث، يمكنك غالبًا العثور على بدائل أصغر حجمًا للمكتبات الشائعة التي تؤدي المهمة نفسها (date-fns هي بديل جيد لـ moment.js). في بعض الأحيان، يكون من الأفضل عدم استخدام إطار عمل أو مكتبة على الإطلاق إذا كان لهما تأثير كبير في الأداء.
تُعد إزالة الرموز غير المستخدَمة طريقة جيدة لتحسين التطبيقات التي تتضمّن مكتبات كبيرة تابعة لجهات خارجية. يوضّح دليل إزالة الرموز غير المستخدَمة هذه العملية بالتفصيل، وفي ما يلي طريقة سريعة لإعادة كتابة رمز العد التنازلي بدون استخدام moment.js.
في الملف app/components/Countdown.jsx، أزِل ما يلي:
const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');
احذف هذا السطر:
const moment = require('moment');
يتطلّب ذلك بعض العمليات الحسابية، ولكن يمكنك تنفيذ العد التنازلي نفسه باستخدام JavaScript العادي:
const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));
الآن، أزِل moment.js
من package.json
وشغِّل Webpack في وحدة التحكّم
مرة أخرى لإنشاء الحزمة المحسّنة.
بهذه السهولة! لقد تم تقليل حجم التطبيق بمقدار 223 كيلوبايت (230 كيلوبايت)، وأصبح حجمه أقل من الحدّ المسموح به.🎉

مراقب
لا يتطلّب إعداد ميزانية الأداء في Webpack سوى بضعة أسطر من الرموز البرمجية، وسيتم تنبيهك إذا أضفت (عن طريق الخطأ) تبعية كبيرة. يقول المثل "بعيد عن العين، بعيد عن القلب"، ولكن يمكن أن يضمن لك Webpack أن تكون على دراية بتأثيرات الأداء في جميع الأوقات.