עשיתם עבודה קשה כדי להגיע מהר, ועכשיו כדאי לכם לבצע אוטומציה של בדיקות הביצועים באמצעות Lighthouse Bot.
Lighthouse מדרג את האפליקציה ב-5 קטגוריות, ואחת מהן היא הביצועים. אפשר לנסות לזכור לעקוב אחרי השינויים בביצועים באמצעות DevTools או Lighthouse CLI בכל פעם שאתם עורכים את הקוד, אבל אין צורך לעשות זאת. כלים יכולים לעשות את העבודה הקשה בשבילך. Travis CI הוא שירות מעולה שמפעיל בדיקות של האפליקציה בענן באופן אוטומטי בכל פעם שדוחפים קוד חדש.
Lighthouse Bot משתלב עם Travis CI, והתכונה 'תקציב ביצועים' מבטיחה שלא תשדרגו לאחור את הביצועים בטעות בלי לשים לב. אתם יכולים להגדיר את המאגר כך שלא יאפשר מיזוג של בקשות משיכה אם הציונים ב-Lighthouse נמוכים מהסף שהגדרתם (לדוגמה, < 96/100).
![בדיקות של בוט Lighthouse שנכשלו ב-GitHub](https://web.dev/static/articles/using-lighthouse-bot-to-set-a-performance-budget/image/failing-lighthouse-bot-ch-5dbc7f54f84d3.png?authuser=5&hl=he)
למרות שאפשר לבדוק את הביצועים במארח מקומי, בדרך כלל האתר ישיג ביצועים שונים בשרתים פעילים. כדי לקבל תמונה מציאותית יותר, עדיף לפרוס את האתר בשרת Staging. אפשר להשתמש בכל שירות אירוח. במדריך הזה נסביר על אירוח ב-Firebase.
1. הגדרה
האפליקציה הפשוטה הזו עוזרת למיין שלושה מספרים.
משכפלים את הדוגמה מ-GitHub ומקפידים להוסיף אותה כמאגר בחשבון GitHub.
2. פריסה ב-Firebase
כדי להתחיל, נדרש חשבון Firebase. לאחר מכן, צריך ללחוץ על 'הוספת פרויקט' כדי ליצור פרויקט חדש במסוף Firebase:
פריסה ב-Firebase
כדי לפרוס את האפליקציה יש צורך ב-CLI של Firebase. גם אם כבר התקנתם אותה, מומלץ לעדכן לעתים קרובות את ה-CLI לגרסה העדכנית ביותר באמצעות הפקודה הבאה:
npm install -g firebase-tools
כדי לתת הרשאה ל-CLI של Firebase מריצים את:
firebase login
עכשיו מפעילים את הפרויקט:
firebase init
במהלך ההגדרה תוצג לכם במסוף סדרה של שאלות:
- כשתתבקשו לבחור תכונות, בחרו באפשרות 'אירוח'.
- בוחרים את פרויקט ברירת המחדל ב-Firebase במסוף Firebase.
- מקלידים את המילה 'ציבורי' בתור הספרייה הציבורית.
- כדי להגדיר כאפליקציה עם דף יחיד, מקלידים "N" (לא).
התהליך הזה יוצר קובץ תצורה firebase.json
ברמה הבסיסית (root) של ספריית הפרויקט.
איזה כיף, הכול מוכן לפריסה! הפעלה:
firebase deploy
בעוד שבריר שנייה תהיה לך אפליקציה פעילה.
3. הגדרת טראוויס
תצטרכו לרשום חשבון ב-Travis ואז להפעיל את השילוב של אפליקציות GitHub בקטע Settings (הגדרות) בפרופיל שלכם.
אחרי שיוצרים חשבון
עוברים להגדרות בפרופיל, לוחצים על Sync account (סנכרון חשבון) ומוודאים שמאגר הפרויקט מופיע ב-Travis.
כדי להתחיל באינטגרציה רציפה (CI) צריך שני דברים:
- כדי לשמור קובץ
.travis.yml
בתיקיית השורש - כדי להפעיל build באמצעות דחיפת Git ישנה רגילה
במאגר lighthouse-bot-starter
כבר יש קובץ YAML של .travis.yml
:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
קובץ ה-YAML מורה ל-Travis להתקין את כל יחסי התלות ולבנות את האפליקציה שלכם. עכשיו תורכם לדחוף את האפליקציה לדוגמה למאגר משלכם ב-GitHub. אם עדיין לא עשיתם זאת, מריצים את הפקודה הבאה:
git push origin main
לוחצים על המאגר בקטע Settings (הגדרות) ב-Travis כדי לראות את מרכז הבקרה של Travis של הפרויקט. אם הכול מגניב, תוך כמה דקות תראו שה-build שלכם יהפוך לצהוב לירוק. 🎉
4. אוטומציה של פריסת Firebase עם Travis
בשלב 2, התחברתם לחשבון Firebase ופרסתם את האפליקציה משורת הפקודה עם firebase deploy
. כדי ש-Travis יוכל לפרוס את האפליקציה ב-Firebase, עליך להעניק לה הרשאה. איך עושים זאת? באמצעות אסימון Firebase.
🗝️🔥
מתן הרשאה ל-Firebase
כדי ליצור את האסימון, מריצים את הפקודה הבאה:
firebase login:ci
תיפתח כרטיסייה חדשה בחלון הדפדפן כדי שמערכת Firebase תוכל לאמת את הזהות שלכם. לאחר מכן, מביטים במסוף ותראו את האסימון החדש שהופק. מעתיקים אותו וחוזרים ל-Travis.
במרכז השליטה של Travis של הפרויקט, עוברים אל אפשרויות נוספות > הגדרות > משתני סביבה.
מדביקים את האסימון בשדה הערך, נותנים למשתנה שם FIREBASE_TOKEN
ומוסיפים אותו.
הוספת פריסה להגדרת Travis
אתם צריכים את השורות הבאות כדי להורות ל-Travis לפרוס את האפליקציה אחרי כל build מוצלח.
צריך להוסיף אותם בסוף הקובץ .travis.yml
. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
דחוף את השינוי הזה ל-GitHub והמתן לפריסה האוטומטית הראשונה שלך. אם תסתכלו ביומן של Travis, יופיע בקרוב הכיתוב ✔️ הפריסה הושלמה!
בכל פעם שתבצע שינויים באפליקציה, הם ייפרסו באופן אוטומטי ב-Firebase.
5. הגדרת בוט Lighthouse
כדי לעדכן אותך בציונים של האפליקציה שלך ב-Lighthouse, הבוט Lighthouse משתמש בו. היא רק צריכה הזמנה למאגר שלך.
ב-GitHub, עוברים להגדרות הפרויקט ומוסיפים את Lighthousebot כשותף עריכה (הגדרות>שותפי עריכה):
אישור הבקשות האלה הוא תהליך ידני, כך שהן לא תמיד מתרחשות באופן מיידי. לפני שמתחילים לבדוק, ודאו ש-Lighthousebot אישר את הסטטוס של שותף העריכה. בינתיים, תצטרכו גם להוסיף עוד מפתח למשתני הסביבה של הפרויקט ב-Travis. השאירו את כתובת האימייל כאן, ותקבלו מפתח של בוט Lighthouse לתיבת הדואר הנכנס. 📬
ב-Travis, מוסיפים את המפתח הזה כמשתנה סביבה ונותנים לו את השם LIGHTHOUSE_API_KEY
:
הוספת Lighthouse בוט לפרויקט שלך
בשלב הבא, כדי להוסיף את Lighthouse Bot לפרויקט, מריצים את:
npm i --save-dev https://github.com/ebidel/lighthousebot
והוסיפו את הקטע הזה ל-package.json
:
"scripts": {
"lh": "lighthousebot"
}
הוספת בוט Lighthouse לתצורת טראוויס
לטיפ האחרון, בדקו את ביצועי האפליקציה אחרי כל בקשת משיכה!
ב-.travis.yml
יש להוסיף עוד שלב ב-after_ success:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
תתבצע בדיקה של Lighthouse על כתובת ה-URL הנתונה, כך שצריך להחליף את
https://staging.example.com
בכתובת ה-URL של האפליקציה
(כלומר your-app-123.firebaseapp.com).
קבעו סטנדרטים גבוהים ושנו את ההגדרות על מנת שלא תקבלו שינויים באפליקציה שציון הביצועים שלהם נמוך מ-95:
- npm run lh -- --perf=95 https://staging.example.com
יש לשלוח בקשת משיכה להפעלת בדיקה של בוט Lighthouse ב-Travis
Lighthouse Bot בודק רק בקשות משיכה, כך שאם תעבירו עכשיו את ההסתעפות הראשית להסתעפות הראשית, יופיע הכיתוב 'ניתן להפעיל את הסקריפט הזה רק בבקשות PR של Travis' ביומן ה-Travis.
כדי להפעיל את הבדיקה של Lighthouse Bot:
- תשלום על סניף חדש
- דחוף אותו ל-GitHub
- יצירת בקשת משיכה
רק צריך לחכות על הקו של דף בקשת המשיכה ולחכות עד שהבוט של Lighthouse ישרוד! 🎤
ציון הביצועים נהדר, האפליקציה לא הגיעה לתקציב והבדיקה עברה!
אפשרויות נוספות ב-Lighthouse
זוכרים איך הצוות של Lighthouse בודק 5 קטגוריות שונות? אפשר לאכוף את הניקוד לכל אחד מהסימונים של בוט ה-Lighthouse:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
דוגמה:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
ציון הביצועים ייכשל אם ציון הביצועים יורד מתחת ל-93 או שציון האופטימיזציה למנועי חיפוש (SEO) ירד מתחת ל-100.
אפשר גם לבחור לא לקבל את התגובות של Lighthouse Bot באמצעות האפשרות --no-comment
.