שימוש בגודל חבילה עם Travis CI

Milica Mihajlija

שימוש ב-bundlesize עם Travis CI מאפשר לכם להגדיר תקציבי ביצועים עם הגדרה מינימלית ולאכוף אותם כחלק מתהליך הפיתוח. Travis CI הוא שירות שמריץ בדיקות לאפליקציה שלכם בענן בכל פעם שאתם דוחפים קוד ל-GitHub. אתם יכולים להגדיר את המאגר כך שלא יאפשר מיזוג של בקשות משיכה, אלא אם הבדיקות של גודל החבילה יעברו.

הבדיקות של Bundlesize ב-GitHub כוללות השוואת גודל להסתעפות הראשית, וגם אזהרה במקרה של קפיצה גדולה בגודל.

ריכזנו כאן אפליקציה בחבילה עם webpack, שמאפשרת להצביע לחתול שאתם אוהבים.

הגדרה של תקציב הביצועים

התקלה הזו כבר כוללת גודל חבילה.

• לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.

החבילה הראשית של האפליקציה הזו נמצאת בתיקייה הציבורית. כדי לבדוק את הגודל שלו, מוסיפים את הקטע הבא לקובץ package.json:

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

כדי שהגודל של חבילת ה-JavaScript המצוננת יהיה מתחת למגבלה המומלצת, צריך להגדיר את תקציב הביצועים ל-170KB בשדה maxSize.

Bundlesize תומך בתבניות glob והתו הכללי לחיפוש * בנתיב הקובץ יהיה תואם לכל שמות החבילות בתיקייה הציבורית.

יצירת סקריפט בדיקה

כדי ש-Travis יוכל להריץ בדיקה, צריך להוסיף סקריפט בדיקה אל package.json:

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

הגדרת אינטגרציה רציפה (CI)

שילוב של GitHub ו-Travis CI

קודם כל, יוצרים מאגר חדש לפרויקט הזה בחשבון GitHub ומפעילים אותו באמצעות README.md.

תצטרכו לפתוח חשבון ב-Travis ולהפעיל את השילוב של GitHub Apps בקטע 'הגדרות' בפרופיל.

אחרי שיוצרים חשבון, עוברים אל Settings בפרופיל, לוחצים על הלחצן Sync account ומוודאים שהמאגר החדש מופיע ב-Travis.

מתן הרשאה ל-bundlesize לפרסם בקשות משיכה

כדי ש-Bundlesize יוכל לפרסם בקשות משיכה, צריך לעבור לקישור הזה כדי לקבל את האסימון של Bundlesize שיישמר בהגדרות של Travis.

במרכז הבקרה של Travis בפרויקט, עוברים אל More options (אפשרויות נוספות) > Settings (הגדרות) > Environment variables (משתני סביבה).

מוסיפים משתנה סביבה חדש עם האסימון כשדה ערך ועם BUNDLESIZE_GITHUB_TOKEN בתור השם.

הדבר האחרון שצריך כדי להפעיל את האינטגרציה הרציפה הוא קובץ .travis.yml, שמנחה את טראוויס CI מה לעשות. כדי להאיץ את הדברים, הוא כבר כלול בפרויקט ומציין שהאפליקציה משתמשת ב-NodeJS.

בשלב הזה הכול מוכן, וגודל החבילה מציג אזהרה אם קוד ה-JavaScript יחרוג אי פעם מהתקציב. גם אם אתם מתחילים עם נתונים מצוינים, עם הזמן, כשמוסיפים תכונות חדשות, הקילובייטים יכולים לצבור. בעזרת מעקב אוטומטי אחר תקציב הביצועים, תוכלו להיות בטוחים שהתקציב לא יחמוק מעיניכם.

רוצה לנסות?

הפעלת הבדיקה הראשונה של גודל החבילה

כדי לראות איך האפליקציה עומדת בתקציב הביצועים, מוסיפים את הקוד למאגר ב-GitHub שיצרתם בשלב 3.

1. ב-Glitch, לוחצים על Tools (כלים) > Git, Import, and Export (Git, ייבוא וייצוא) > Export to GitHub (ייצוא ל-GitHub).

2. בחלון הקופץ, מזינים את שם המשתמש ב-GitHub ואת שם המאגר בתור username/repo. אפליקציית Glitch תייצא את האפליקציה להסתעפות חדשה בשם 'glitch'.

3. יוצרים בקשת משיכה חדשה בלחיצה על New pull request בדף הבית של המאגר.

עכשיו אפשר לראות את בדיקות הסטטוס שמתבצעות בדף בקשת המשיכה.

תהליך הבדיקה לא יימשך זמן רב עד שכל הבדיקות יסתיימו. לצערנו, האפליקציה של הבחירות לחתול קצת נפוחה ולא עוברת את בדיקת תקציב הביצועים. החבילה הראשית היא בגודל 266KB והתקציב הוא 170KB.

אופטימיזציה

למרבה המזל, יש כמה שיפורים קלים בביצועים שאפשר להשיג על ידי הסרת קוד שלא בשימוש. יש שני ייבוא עיקריים ב-src/index.js:

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

האפליקציה משתמשת ב-Firebase Realtime Database כדי לאחסן את הנתונים, אבל היא מייבאת את חבילת Firebase כולה, שכוללת הרבה יותר ממסד נתונים (אימות, אחסון, שליחת הודעות וכו').

כדי לפתור את הבעיה, מייבאים רק את החבילה שנדרשת לאפליקציה בקובץ src/index.js:

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

הפעלה מחדש של הבדיקה

מכיוון שקובץ המקור עודכן, עליכם להריץ את Webpack כדי ליצור את קובץ החבילה החדש.

1. לוחצים על הלחצן כלים.

2. לאחר מכן לוחצים על הלחצן מסוף. המסוף ייפתח בכרטיסייה אחרת.

3. במסוף, מקלידים webpack וממתינים לסיום ה-build.

4. מייצאים את הקוד ל-GitHub בקטע Tools (כלים) > Git, Import, and Export (Git, ייבוא וייצוא) > Export to GitHub (ייצוא ל-GitHub).

5. נכנסים לדף בקשת המשיכה ב-GitHub וממתינים עד שכל הבדיקות יסתיימו.

הצלחת! גודל החבילה החדש הוא 125.5KB וכל הבדיקות עברו. 🎉

בניגוד ל-Firebase, אי אפשר לבצע בקלות ייבוא חלקים מספריית הרגע, אבל שווה לנסות. במאמר הסרת קוד Lab שאינו בשימוש מוסבר איך מבצעים אופטימיזציה נוספת לאפליקציה.

מעקב

האפליקציה עכשיו במסגרת התקציב והכול בסדר. Travis CI ו-bundlesize ימשיכו לעקוב אחרי תקציב הביצועים בשבילכם, כדי לוודא שהאפליקציה תישאר מהירה.