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

Milica Mihajlija

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

הבדיקות של Bundlesize ב-GitHub כוללות השוואה של הגודל לענף הראשי ואזהרה במקרה של עלייה משמעותית בגודל.

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

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

הפרויקט הזה ב-Glitch כבר מכיל את bundlesize.

• לוחצים על Remix to Edit כדי להפוך את הפרויקט לעריכה.

החבילה הראשית של האפליקציה הזו נמצאת בתיקייה הציבורית. כדי לבדוק את הגודל שלו, מוסיפים את הקטע הבא לקובץ 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"
}

הגדרת אינטגרציה רציפה

איך משלבים את GitHub עם Travis CI

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

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

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

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

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

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

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

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

אחרי השלב הזה, הכול מוכן ותקבלו אזהרה מ-bundlesize אם קובץ ה-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, אי אפשר לייבא חלקים מהספרייה של Moment בקלות, אבל כדאי לנסות. ב-codelab בנושא הסרת קוד שלא נמצא בשימוש מוסבר איך לבצע אופטימיזציה נוספת של האפליקציה.

מעקב

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