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

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

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

בדיקת גודל החבילה ב-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"
}

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

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

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

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

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

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

לחצן הסנכרון של Travis CI

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

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

טוקן של גודל החבילה

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

הוספת משתני סביבה ב-Travis CI

מוסיפים משתנה סביבה חדש עם האסימון בשדה הערך ו-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 בדף הבית של המאגר.

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

בדיקות מתבצעות ב-GitHub

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

מעקב

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