אחרי שמגדירים תקציב ביצועים, זה הזמן להגדיר את תהליך ה-build כדי לעקוב אחריו. יש כמה כלים שמאפשרים להגדיר ערכי סף למדדי ביצועים נבחרים, ולהזהיר אם חורגים מהתקציב. במאמר הזה נסביר איך לבחור את התוסף שהכי מתאים לצרכים ולהגדרות הנוכחיות שלכם. 🕵️ ♀️
תקציבי ביצועים של Lighthouse
Lighthouse הוא כלי ביקורת שבודק אתרים בכמה תחומים עיקריים – ביצועים, נגישות, שיטות מומלצות ורמת הביצועים של האתר כאפליקציית Progressive Web App.
גרסת שורת הפקודה של Lighthouse (גרסה 5 ואילך) תומכת בהגדרה של תקציבי ביצועים על סמך:
- גודל המשאב
- מספר משאבים
אפשר להגדיר תקציבים לכל אחד מסוגי המשאבים הבאים:
document
font
image
media
other
script
stylesheet
third-party
total
התקציבים מוגדרים בקובץ JSON, ואחרי שמגדירים אותם, העמודה החדשה 'חריגה מהתקציב' מציינת אם אתם חורגים מהמגבלות.
![הקטע של התקציבים בדוח Lighthouse](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=5&hl=he)
רמזים לביצועי Webpack
Webpack הוא כלי build יעיל לאופטימיזציה של האופן שבו הקוד שלכם נשלח למשתמשים. אפשר גם להגדיר תקציבי ביצועים על סמך גודל הנכס.
הפעלת רמזים לביצועים ב-webpack.config.js
כדי לקבל אזהרות או שגיאות בשורת הפקודה כשגודל החבילה יחרוג מהמגבלה. זו דרך נהדרת לשים לב לגדלים של הנכסים במהלך הפיתוח.
אחרי שלב ה-build, ה-Webpack יוצר רשימה של נכסים עם קוד צבעים והגדלים שלהם. כל מה שחורג מהתקציב מודגש בצהוב.
![פלט של חבילת Webpack שמדגיש את Bundle.js](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=5&hl=he)
מגבלת ברירת המחדל לנכסים וגם לנקודות כניסה היא 250KB. תוכל להגדיר יעדים משלך בקובץ התצורה.
![אזהרה לגבי גודל החבילה של Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=5&hl=he)
המערכת משווה בין התקציבים לגדלים של נכסים לא דחוסים. גודל JavaScript לא דחוס קשור לזמן הביצוע, וההפעלה של קבצים גדולים עשויה להימשך זמן רב, במיוחד במכשירים ניידים.
![המלצה לאופטימיזציה של הביצועים של חבילת Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=5&hl=he)
גודל מקבץ
Bundlesize היא חבילה פשוטה של NPM שבודקת את גודל הנכס ביחס לסף שהגדרתם. אפשר להריץ אותו באופן מקומי ולשלב אותו עם ה-CI שלכם.
CLI בגודל חבילה
מריצים את bundlesize CLI על ידי ציון ערך סף והקובץ שרוצים לבדוק.
bundlesize -f "dist/bundle.js" -s 170kB
תוצאות בדיקה עם קידוד לפי צבעים בשורה אחת מוצגות בחבילות.
![בדיקת CLI של גודל חבילה נכשלה](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=5&hl=he)
![בדיקת ה-CLI של גודל החבילה עוברת בהצלחה](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=5&hl=he)
גודל חבילה ל-CI
אפשר להפיק את המקסימום מהגודל של החבילה באמצעות שילוב עם CI כדי לאכוף באופן אוטומטי מגבלות גודל על בקשות משיכה. אם בדיקת גודל החבילה נכשלת, בקשת המשיכה הזו לא ממוזגת. הוא פועל עבור בקשות משיכה ב-GitHub עם Travis CI, CircleCI, Wercker ו-Drone.
![סטטוס בדיקת גודל החבילה ב-GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=5&hl=he)
אולי יש לכם היום אפליקציה מהירה, אבל הוספת קוד חדש יכולה לשנות את זה לעיתים קרובות. בדיקה של בקשות משיכה באמצעות Bundlesize תעזור לך למנוע רגרסיות של ביצועים. Bootstrap, Tinder, Trivago ורבים אחרים משתמשים בו כדי לנהל את התקציבים שלהם בצורה טובה.
גודל החבילה מאפשר להגדיר ערכי סף לכל קובץ בנפרד. האפשרות הזו שימושית במיוחד כשמפצלים חבילה באפליקציה.
כברירת מחדל, הוא בודק גדלים של נכסים עם דחיסה באמצעות gzip. ניתן להשתמש באפשרות הדחיסה כדי לעבור לדחיסת brotli או להשבית אותה לגמרי.
בוט מגדלור
![בוט מגדלור](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=5&hl=he)
Lighthouse בוט משתלב עם Travis CI ואוכף תקציבים על סמך כל אחת מחמש קטגוריות הביקורת של Lighthouse. לדוגמה: תקציב של 100 לציון הביצועים של Lighthouse. לפעמים קל יותר לעקוב אחרי מספר יחיד מאשר תקציבים של נכסים נפרדים, והציונים ב-Lighthouse מביאים בחשבון הרבה דברים.
![תוצאות של Lighthouse ᐧ](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=5&hl=he)
Lighthouse Bot מריץ בדיקה אחרי פריסת האתר לשרת ה-Staging. ב-.travis.yml
מגדירים תקציבים לקטגוריות מסוימות של Lighthouse עם אפשרויות של --perf
, --a11y
, --bp
, --seo
או --pwa
. מומלץ להישאר באזור הירוק עם ציון של 90 לפחות.
after_success: - ./deploy.sh # Deploy the PR changes to staging server - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test
אם הציונים של בקשת משיכה ב-GitHub נמוכים מהסף שהגדרתם, Lighthouse Bot יכול למנוע מיזוג של בקשת משיכה. ⛔
![סטטוס בדיקת הבוט של Lighthouse ב-GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=5&hl=he)
לאחר מכן, Lighthouse בוט מגיב לבקשת המשיכה שלכם עם הציונים המעודכנים. זוהי תכונה נהדרת שמעודדת שיחה על הביצועים בזמן שמתרחשים שינויים בקוד.
![דירוג הדיווח של Lighthouse על בקשת משיכה](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=5&hl=he)
אם גיליתם שבקשת המשיכה נחסמה בגלל ציון נמוך ב-Lighthouse, מריצים בדיקה באמצעות Lighthouse CLI או בכלי הפיתוח. הכלי יוצר דוח עם פרטים לגבי צווארי בקבוק ורמזים שמאפשרים לבצע אופטימיזציה פשוטה.
סיכום
כלי | CLI | CI | סיכום |
---|---|---|---|
מגדלור | ✔️ | ❌ |
|
חבילת Webpack | ✔️ | ❌ |
|
גודל מקבץ | ✔️ | ✔️ |
|
בוט מגדלור | ❌ | ✔️ |
|