دمج ميزانيات الأداء في عملية الإنشاء

Milica Mihajlija

بعد تحديد ميزانية الأداء، يحين وقت إعداد عملية التصميم لتتبّعها. هناك عدد من الأدوات التي تسمح لك بتحديد الحدود الدنيا لمقاييس الأداء المختارة، وتحذّرك في حال تجاوز الميزانية. تعرف على كيفية اختيار أفضل ما يناسب احتياجاتك والإعداد الحالي. 🕵️ ♀️

ميزانيات Lighthouse الخاصة بالأداء

Lighthouse هي أداة تدقيق تختبر المواقع الإلكترونية في بعض المجالات الرئيسية، مثل الأداء وتسهيل الاستخدام وأفضل الممارسات ومستوى أداء موقعك الإلكتروني كتطبيق ويب تقدّمي.

يتيح إصدار سطر الأوامر من Lighthouse (الإصدار 5 والإصدارات الأحدث) ضبط ميزانيات الأداء استنادًا إلى ما يلي:

• حجم المورد
• عدد الموارد

يمكنك ضبط ميزانيات لأيٍّ من أنواع الموارد التالية:

• document
• font
• image
• media
• other
• script
• stylesheet
• third-party
• total

يتم ضبط الميزانيات في ملف JSON، وبعد تحديدها، يُخبرك العمود الجديد "تجاوز الميزانية" بما إذا كنت تتجاوز أي حدود.

قسم "الميزانيات" في تقرير Lighthouse

نصائح أداء حزمة الويب

Webpack هي أداة تصميم فعالة لتحسين كيفية تسليم الرموز البرمجية للمستخدمين. وتتيح أيضًا إعداد ميزانيات الأداء استنادًا إلى حجم مادة العرض.

فعِّل تلميحات الأداء في webpack.config.js للحصول على تحذيرات أو أخطاء سطر الأوامر عند ازدياد حجم الحزمة بشكل يتجاوز الحدّ الأقصى. ويُعدّ هذا الأمر وسيلة رائعة للبقاء على دراية بأحجام مواد العرض خلال عملية التطوير.

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

حجم package.js المميّز أكبر من ميزانيتك

إنّ الحدّ الأقصى التلقائي لكلّ من مواد العرض ونقاط الدخول هو 250 كيلوبايت. يمكنك تحديد أهدافك الخاصة في ملف الإعداد.

تحذير بشأن حجم حزمة الويب ⚠️

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

ملاحظة: تؤثر أحجام مواد العرض المضغوطة في وقت النقل، وهو أمر مهم للغاية في الشبكات البطيئة.

ميزة إضافية: لن تعرض حزمة الويب تحذيرًا فحسب، بل ستقدّم لك اقتراحًا حول كيفية تخفيض حجم حِزمك. 💡

حجم الحزمة

Bundlesize هي حزمة بسيطة من npm تختبر حجم مادة العرض وفقًا للحد الأدنى الذي حدّدته. ويمكن تشغيله محليًا ودمجه مع CI.

واجهة سطر الأوامر بحجم الحزمة

شغِّل bundlesize CLI من خلال تحديد حدّ والملف الذي تريد اختباره.

bundlesize -f "dist/bundle.js" -s 170kB

ينتج عن Bundlesize نتائج اختبار مصنَّفة حسب اللون في سطر واحد.

تعذّر في اختبار واجهة سطر الأوامر بحجم الحزمة ❌

اجتياز اختبار واجهة سطر الأوامر بحجم الحزمة ✔️

حجم الحزمة لمعيار CI

ستحصل على أقصى قيمة من حجم الحزمة إذا دمجتها مع CI لفرض حدود الحجم على طلبات السحب. في حال تعذّر اختبار حجم الحزمة، لا يتم دمج طلب السحب هذا. تعمل هذه الميزة مع طلبات السحب على GitHub مع Travis CI وCircleCI وWercker وDrone.

حالة التحقّق من حجم الحزمة على GitHub

ربما يكون لديك تطبيق سريع اليوم، ولكن إضافة رمز جديد يمكن أن يؤدي في كثير من الأحيان إلى تغيير ذلك. سيساعدك التحقّق من طلبات السحب من خلال حجم الحزمة على تجنب أي تراجع في الأداء. يستخدم Bootstrap وTinder وTrivago وغيرهم الكثيرين من أجل الحفاظ على ميزانياتهم.

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

وهي تختبر أحجام مواد العرض المضغوطة بتنسيق gzip بشكل تلقائي. يمكنك استخدام خيار الضغط للتبديل إلى ضغط broli أو إيقافه بالكامل.

برنامج تتبُّع Lighthouse

يتكامل برنامج Lighthouse Bot مع Travis CI ويفرض الميزانيات استنادًا إلى أي من فئات تدقيق Lighthouse الخمس. على سبيل المثال، ميزانية قدرها 100 لنتيجة أداء Lighthouse. قد يكون من الأسهل أحيانًا تتبّع رقم واحد بدلاً من أن تأخذ ميزانيات مواد العرض الفردية، وتأخذ نتائج Lighthouse في الاعتبار عدة أمور.

نتائج Lighthouse 💯

يُجري برنامج تتبُّع Lighthouse عملية تدقيق بعد نشر موقع إلكتروني على خادم مرحلي. في .travis.yml، يمكنك تحديد ميزانيات لفئات معيّنة من Lighthouse مع خيارات --perf أو --a11y أو --bp أو --seo أو --pwa. استهدف البقاء في المنطقة الخضراء بدرجات 90 على الأقل.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

إذا كانت نتائج طلب السحب على GitHub أدنى من الحدّ الذي ضبطته، يمكن أن يمنع برنامج Lighthouse Bot دمج طلب السحب. ⛔

حالة التحقّق من برنامج تتبُّع Lighthouse على GitHub

بعد ذلك، يعلّق برنامج Lighthouse Bot على طلب السحب مع عرض النتائج المعدَّلة. وهذه ميزة أنيقة تشجع على التحدث حول الأداء مع حدوث تغييرات في التعليمات البرمجية.

نتائج تقارير Lighthouse حول طلب السحب Pending

إذا تبيّن لك أنّ طلب السحب محظور بسبب نتيجة سيئة في Lighthouse، يمكنك إجراء تدقيق باستخدام واجهة سطر الأوامر في Lighthouse أو في أدوات مطوّري البرامج. وينشئ تقريرًا بتفاصيل حول المؤثِّرات السلبية وتلميحات عن تحسينات بسيطة.

ملخّص

الأداة	CLI	CI	ملخّص
منارة	✔️	❌	الميزانيات للأنواع المختلفة من الموارد استنادًا إلى حجمها أو عددها.
حزمة الويب	✔️	❌	الميزانيات استنادًا إلى أحجام مواد العرض التي تم إنشاؤها بواسطة حزمة الويب. لفحص الأحجام غير المضغوطة
حجم الحزمة	✔️	✔️	الميزانيات استنادًا إلى أحجام موارد محددة. لفحص الأحجام المضغوطة أو غير المضغوطة
برنامج تتبُّع Lighthouse	❌	✔️	الميزانيات استنادًا إلى نتائج Lighthouse.