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

Milica Mihajlija

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

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

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

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

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

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

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

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

מתן הרשאה לגודל החבילה לפרסם בבקשות משיכה

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

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

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

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

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

אני רוצה לנסות

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

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

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

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

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

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

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

אופטימיזציה

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

4. ייצא את הקוד אל GitHub דרך כלים > Git, יבוא, וייצוא > ייצוא ל-GitHub.

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

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

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

צג

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