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

Milica Mihajlija

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

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

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

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

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

• انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.

تتوفّر الحزمة الرئيسية لهذا التطبيق في المجلد العلني. لاختبار حجمه، أضِف القسم التالي إلى ملف 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

أولاً، قم بإنشاء مستودع جديد لهذا المشروع على حسابك على جيت هب وإعداده باستخدام README.md.

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

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

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

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

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

أضف متغير بيئة جديد مع استخدام الرمز المميز كحقل القيمة وBUNDLEsize_GITHUB_TOKEN كاسم.

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

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

جرّبه الآن

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

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

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

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

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

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

لن يستغرق الأمر وقتًا طويلاً إلى أن تكتمل جميع عمليات التحقّق. للأسف، تطبيق التصويت على القطط كبير جدًا ولا يجتاز فحص ميزانية الأداء. حجم الحزمة الرئيسية هو 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, Import, Export > التصدير إلى GitHub.

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

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

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

مراقب

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