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

Milica Mihajlija

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

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

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

تحديد ميزانية قائمة على الأداء

يحتوي تطبيق Glitch هذا على bundlesize.

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

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

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

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

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

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

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

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

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

دمج GitHub وTravis CI

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

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

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

السماح لـ bundlesize بالنشر في طلبات السحب

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

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

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

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

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

للتجربة:

تشغيل اختبار bundlesize الأول

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

1. في Glitch، انقر على الأدوات (Tools) > Git، والاستيراد، والتصدير (Git, Import, and Export) > التصدير إلى GitHub (Export to 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، والاستيراد، والتصدير > التصدير إلى GitHub.

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

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

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

مراقب

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