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

Milica Mihajlija

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

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

للاطّلاع على هذه الميزة أثناء تنفيذها، يتوفّر لك تطبيق مزوَّد بحزمة webpack تتيح لك التصويت لقطتك المفضلة.

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

يحتوي هذا الخلل بالفعل على حجم حزمة.

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

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

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

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

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

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

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

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

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

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

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

التجربة الآن

تشغيل أول اختبار لحجم الحزمة

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

1. على Glitch، انقر على الأدوات > Git, import, and Export > التصدير إلى 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';

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

نظرًا لتحديث الملف المصدر، تحتاج إلى تشغيل حزمة الويب لإنشاء ملف الحزمة الجديد.

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

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

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

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

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

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

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

المراقبة

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