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

ميليكا ميهاجليا

لمتابعة هذا الدرس التطبيقي حول الترميز، افتح هذا الخلل في علامة تبويب ثانية.

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

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

قياس

يحتوي هذا الدرس التطبيقي حول الترميز على التطبيق المضمّن مع حزمة الويب.

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

webpack

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

ملاحظة: يستخدم Webpack الوحدة "KiB" التي ربما لم تصادفها من قبل. يتقارب حجم 1 "كيبيبايت" و1 "كيلوبايت" إلى حد ما: 1 كيبي بايت يساوي 1024 بايت، في حين أنّ 1 كيلوبايت يساوي 1000 بايت.

يحذرك Webpack بشأن حزمة JavaScript الكبيرة ⚠️

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

يحذرك Webpack بشأن حزمة JavaScript الكبيرة ⚠️

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

اقتراح لتحسين أداء حزمة الويب 🏏

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

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

ملاحظة: موارد المسار الحرج هي الحد الأدنى من مجموعة الموارد المطلوبة للمتصفّح لعرض محتوى الشاشة الأولى.

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

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

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

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

في هذه الحالة، لن يكون هناك أكثر من حزمة واحدة، وهي بمثابة نقطة الدخول.

في ما يلي قيم التلميحات المحتملة:

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

"خطأ" في تلميح أداء حزمة الويب 🚨

تحسين

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

تُسهل أطر العمل والمكتبات حياة المطورين، ولكن لا يهتم المستخدمون النهائيون بكيفية إنشاء التطبيقات، بل فقط أنها فعالة وسريعة. إذا وجدت نفسك تتجاوز الميزانية المخصصة للأداء، فقد حان الوقت للتفكير في التحسينات الممكنة.

في العالم الحقيقي، عادةً ما يكون من الصعب تبديل أطر العمل الكبيرة من جهة العميل، لذلك من المهم استخدامها بحكمة. بعد إجراء القليل من البحث، يمكنك غالبًا العثور على بدائل أصغر للمكتبات الشائعة التي تؤدي المهمة نفسها (يمكنك استخدام date-fns بدلاً من moment.js). في بعض الأحيان، يكون من المنطقي عدم استخدام إطار عمل أو مكتبة على الإطلاق إذا كان لها تأثير كبير على الأداء.

تُعدّ إزالة الرموز غير المستخدَمة طريقة جيدة لتحسين التطبيقات التي تتضمّن المكتبات الكبيرة التابعة لجهات خارجية. يشرح دليل "إزالة الرمز غير المستخدَم" هذه العملية بالتفصيل، وإليك طريقة سريعة لإعادة كتابة رمز العد التنازلي بدون استخدام مقتطف dot.js.

في app/components/Countdown.jsx، عليك إزالة ما يلي:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

واحذف هذا السطر:

const moment = require('moment');

يتطلب الأمر القليل من العمليات الحسابية، ولكن يمكنك تنفيذ نفس العد التنازلي باستخدام JavaScript vanilla:

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 وتشغيل حزمة الويب في وحدة التحكم مرة أخرى لإنشاء الحزمة المحسَّنة.

بهذه السهولة! لقد تم خفض 223 كيبي بايت (230 كيلوبايت) وتم تجاوز ميزانية التطبيق.🎉

المراقبة

يتطلّب إعداد ميزانية الأداء في حزمة الويب سطرَين فقط من الرمز، وسيظهر لك تحذير في حال أضفت تبعية كبيرة (عن طريق الخطأ). غالبًا ما يكون القول "بعيدًا عن الرؤية"