ضبط ميزانيات للأداء باستخدام حزمة الويب

Milica Mihajlija

يجمع Webpack كل ملفاتك المستورَدة ويحزّمها في ملف ناتج واحد أو أكثر يُعرف باسم الحِزم. إنّ تجميع الحِزم أمر رائع، ولكن مع نمو تطبيقك، سيزداد حجم حِزمك أيضًا. عليك مراقبة أحجام الحِزم لضمان عدم تزايدها إلى حجم كبير جدًا والتأثير في المدة التي يستغرقها تطبيقك في التحميل. تتيح Webpack ضبط الميزانيات القائمة على الأداء استنادًا إلى حجم مادة العرض، ويمكنها تتبُّع أحجام الحِزم نيابةً عنك.

إليك تطبيق يحصّل الأيام المتبقية حتى حلول العام الجديد. تم إنشاؤه باستخدام React وmoment.js. (تمامًا مثل التطبيقات الواقعية التي تعتمد بشكل متزايد على الإطارات والمكتبات. 😉)

تطبيق يحصّل الأيام المتبقية حتى حلول عيد رأس السنة

القياس

يحتوي هذا الدليل التعليمي على التطبيق المجمّع مع webpack.

  1. انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.
  2. انقر على Terminal (ملاحظة: إذا لم يظهر زر Terminal، قد تحتاج إلى استخدام خيار "ملء الشاشة").
  3. للحصول على قائمة بألوان مختلفة للأصول وأحجامها، اكتب webpack في وحدة التحكّم.
webpack

يتم تمييز الحزمة الرئيسية باللون الأصفر لأنّ حجمها أكبر من 244 كيلوبايت (250 كيلوبايت).

إخراج Webpack يعرض حجم الحِزمة 323 كيلوبايت
تحذير من Webpack بشأن حِزمة JavaScript كبيرة الحجم ⚠️

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

تحذير Webpack بأنّ مادة العرض تتجاوز الحدّ الأقصى المُقترَح للحجم
تحذير من Webpack بشأن حِزمة JavaScript كبيرة الحجم ⚠️

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

اقتراح لتحسين أداء Webpack
اقتراح لتحسين أداء Webpack 💁

ضبط ميزانية أداء مخصّصة

تعتمد ميزانية الأداء المناسبة على طبيعة مشروعك. من الأفضل دائمًا إجراء البحث بنفسك. قاعدة جيدة للاطّلاع عليها هي إرسال أقل من 170 كيلوبايت من موارد المسار الحرج المضغوطة أو المصغرة.

في هذا العرض التوضيحي البسيط، جرِّب استخدام ميزانية أكثر تحفظًا واضبطها على 100 كيلوبايت (97.7 كيلوبايت). في webpack.config.js، أضِف ما يلي:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

يتم ضبط ميزانية الأداء الجديدة بوحدة البايت:

  • ‫100,000 بايت لمواد العرض الفردية (maxAssetSize)
  • ‫100,000 بايت لنقطة الدخول (maxEntrypointSize)

في هذه الحالة، تتوفّر حِزمة واحدة فقط تعمل أيضًا كنقطة دخول.

القيم المحتملة للملاحظات هي:

  1. warning (الإعداد التلقائي): يتم عرض رسالة تحذير صفراء، ولكن يتم اجتياز عملية الإنشاء. من الأفضل استخدام هذا الإجراء في بيئات التطوير.
  2. error: يتم عرض رسالة خطأ باللون الأحمر، ولكن لا يزال الإصدار ناجحًا. ننصح باستخدام هذا الإعداد لإصدارات الإصدار العلني.
  3. false: لا يتم عرض أي تحذيرات أو أخطاء.
خطأ في أداء Webpack بخط أحمر
تلميح أداء Webpack "خطأ" 🚨

تحسين

الغرض من ميزانية الأداء هو تحذيرك بشأن مشاكل الأداء قبل أن يصبح من الصعب جدًا حلّها. هناك دائمًا أكثر من طريقة واحدة ل إنشاء تطبيق، وبعض الأساليب تؤدي إلى تقليل أوقات التحميل. (تم توثيق الكثير من هذه الممارسات هنا في مقالة تحسين 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 بعد التحسين هو 97.7 كيلوبايت

مراقب

لا يستغرق إعداد ميزانية الأداء في webpack سوى بضعة أسطر من الرمز البرمجي، ويُرسِل لك تحذيرًا في حال إضافة عنصر تابع كبير (عن طريق الخطأ). هناك مقولة مفادها "ما لا نراه لا نهتم به"، ولكن يمكن أن تضمن لك أداة webpack معرفة أثر الأداء في جميع الأوقات.