استخدام الحزمة مع Travis CI

يتيح لك استخدام bundlesize مع Travis CI تحديد ميزانيات الأداء بأقل جهد ممكن، وفرضها كجزء من سير عمل التطوير. ‫Travis CI هي خدمة تُجري اختبارات لتطبيقك في السحابة الإلكترونية في كل مرة تُرسل فيها الرمز إلى GitHub. يمكنك ضبط مستودعك لمنع دمج طلبات الربط ما لم تجتَز اختبارات حجم الحِزمة.

تتضمّن عمليات التحقّق من Bundlesize في GitHub مقارنةً بالحجم في الفرع الرئيسي وتحذيرًا في حال حدوث قفزة كبيرة في الحجم.

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

للاطّلاع على كيفية استخدام هذه الميزة، إليك تطبيق مُجمَّع مع webpack يتيح لك التصويت لقطتك المفضّلة.

تطبيق لاختيار القطة الفائزة

تحديد ميزانية الأداء

يحتوي هذا الخلل على bundlesize.

  • انقر على Remix to Edit (إنشاء ريمكس لتعديل المحتوى) ليصبح المشروع قابلاً للتعديل.

الحزمة الرئيسية لهذا التطبيق متوفّرة في المجلد العام. لاختبار حجمه، أضِف القسم التالي إلى ملف package.json:

"bundlesize": [
 
{
   
"path": "./public/*.bundle.js",
   
"maxSize": "170 kB"
 
}
]

للحفاظ على حجم حِزمة JavaScript المضغوطة ضمن الحدّ المُقترَح، اضبط الميزانية المستندة إلى الأداء على 170 كيلوبايت في الحقل maxSize.

تتيح سمة Bundlesize استخدام نماذج النطاقات العامة، وسيطابق حرف البدل * في مسار الملف جميع أسماء الحِزم في المجلد العلني.

إنشاء نص برمجي اختباري

بما أنّ Travis يحتاج إلى اختبار لتنفيذه، أضِف نص اختبار إلى package.json:

"scripts": {
 
"start": "webpack && http-server -c-1",
 
"test": "bundlesize"
}

إعداد عملية الدمج المستمر

دمج GitHub وTravis CI

أولاً، أنشئ مستودعًا جديدًا لهذا المشروع على حسابك على GitHub و أعِد ضبطه باستخدام README.md.

عليك تسجيل حساب على IDE IDE Travis وتفعيل دمج GitHub Apps ضمن قسم "الإعدادات" في ملفك الشخصي.

دمج تطبيقات GitHub في Travis CI

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

زرّ مزامنة Travis CI

السماح بنشر حجم الحزمة في طلبات سحب الرمز البرمجي

يحتاج Bundlesize إلى إذن ليتمكّن من نشر طلبات سحب، لذا انتقِل إلى هذا الرابط للحصول على رمز برمجي Bundlesize الذي سيتم تخزينه في إعدادات Travis.

رمز مميّز لحجم الحِزمة

في لوحة بيانات Travis الخاصة بمشروعك، انتقِل إلى خيارات إضافية > الإعدادات > متغيّرات البيئة.

إضافة متغيّرات البيئة في Travis CI

أضِف متغيّر بيئة جديدًا باستخدام الرمز المميّز كحقل القيمة و BUNDLESIZE_GITHUB_TOKEN كاسم.

آخر ما تحتاجه لبدء عملية الدمج المستمر هو .travis.ymlملف ، الذي يوضّح لـ Travis CI ما يجب فعله. لتسريع الأمور، تم تضمين الملف في المشروع ويحدّد أنّ التطبيق يستخدم NodeJS.

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

جرّبه الآن

بدء أول اختبار لحجم الحِزمة

لمعرفة مستوى أداء التطبيق مقارنةً بميزانية الأداء، أضِف الرمز إلى مستودع GitHub الذي أنشأته في الخطوة 3.

  1. في Glitch، انقر على الأدوات > Git والاستيراد والتصدير > التصدير إلى GitHub.

  2. في النافذة المنبثقة، أدخِل اسم المستخدم على GitHub واسم المستودع على النحو التالي: username/repo. ستصدِّر Glitch تطبيقك إلى فرع جديد باسم glitch.

  3. أنشئ طلب سحب جديدًا بالنقر على الزر طلب سحب جديد في الصفحة الرئيسية للمستودع.

ستظهر لك الآن عمليات التحقّق من الحالة قيد التقدّم في صفحة طلب سحب الرمز البرمجي.

عمليات التحقّق من GitHub قيد التقدّم

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

تعذّر التحقّق من حجم الحِزمة

تحسين

لحسن الحظ، هناك بعض التحسينات البسيطة التي يمكنك إجراؤها على الأداء من خلال إزالة الرموز غير المستخدَمة. هناك نوعان رئيسيان من عمليات الاستيراد في src/index.js:

import firebase from "firebase";
import * as moment from 'moment';

يستخدم التطبيق قاعدة بيانات Firebase الآنية الاستجابة لتخزين البيانات، ولكنه يستورد حزمة Firebase بالكامل التي تتألف من موارد أكثر من مجرد قاعدة بيانات (المصادقة والتخزين والرسائل وما إلى ذلك).

يمكنك حلّ هذه المشكلة من خلال استيراد الحزمة التي يحتاجها التطبيق فقط في ملف src/index.js:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

إعادة إجراء الاختبار

بما أنّه تم تعديل الملف المصدر، عليك تشغيل webpack لإنشاء ملف الحِزمة الجديد.

  1. انقر على زر الأدوات.

  2. بعد ذلك، انقر على زر وحدة التحكّم. سيؤدي ذلك إلى فتح وحدة التحكّم في علامة تبويب أخرى.

  3. في وحدة التحكّم، اكتب webpack وانتظِر حتى تكتمل عملية الإنشاء.

  4. يمكنك تصدير الرمز إلى GitHub من الأدوات > Git والاستيراد والتصدير > التصدير إلى GitHub.

  5. انتقِل إلى صفحة طلب السحب على GitHub وانتظِر انتهاء جميع عمليات التحقّق.

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

اكتمال عملية النقل بنجاح حجم الحزمة الجديد هو 125.5 كيلوبايت وقد اجتازت جميع عمليات التحقّق. 🎉

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

مراقب

أصبح التطبيق الآن ضمن الميزانية وكل شيء على ما يرام. سيواصل Travis CI وbundlesize monitoring مراقبة ميزانية الأداء نيابةً عنك، ما يضمن استمرار سرعة تطبيقك.