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

Milica Mihajlija

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

ميزانيات أداء أداة Lighthouse

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

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

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

يمكنك تعيين ميزانيات لأي نوع من أنواع الموارد التالية:

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

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

تعديلات على أداء حِزمة Webpack

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

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

بعد خطوة الإصدار، تُخرج webpack قائمة مرمّزة بالألوان من مواد العرض وأحجامها. يتم تمييز أي مبلغ يتجاوز الميزانية باللون الأصفر.

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

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

حجم الحزمة

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

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

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

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

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

حزمة من أجل CI

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

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

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

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

روبوت المنارة

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

يُجري Lighthouse Bot تدقيقًا بعد نشر موقع إلكتروني لخادم مرحلي. في .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 Bot على طلب السحب بنتائج محدَّثة. هذه ميزة أنيقة تشجّع على إجراء محادثة حول الأداء أثناء إجراء تغييرات على الرمز.

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

ملخّص