שילוב תקציבי ביצועים בתהליך ה-build

אחרי שמגדירים תקציב ביצועים, הגיע הזמן להגדיר את תהליך ה-build כדי לעקוב אחריו. יש כמה כלים שמאפשרים להגדיר ערכי סף למדדי הביצועים שבחרתם, ולהתריע אם תחרגו מהתקציב. כאן מוסבר איך לבחור את האפשרות שהכי מתאימה לצרכים ולתצורה הנוכחית שלכם. 🕵️‍♀️

תקציבי ביצועים ב-Lighthouse

Lighthouse הוא כלי ביקורת שבודק אתרים בכמה תחומים מרכזיים – ביצועים, נגישות, שיטות מומלצות וביצועי האתר כאפליקציית Progressive Web App.

גרסת שורת הפקודה של Lighthouse (גרסה 5 ואילך) תומכת בהגדרת תקציבי ביצועים על סמך:

  • גודל המשאב
  • מספר המשאבים

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

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

תקציבים מוגדרים בקובץ JSON, ואחרי ההגדרה שלהם העמודה החדשה 'חריגה מהתקציב' תציין אם אתם חורגים ממגבלות כלשהן.

הקטע 'תקציבים' בדוח Lighthouse
הקטע 'תקציבים' בדוח של Lighthouse

טיפים לשיפור הביצועים ב-Webpack

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

כדי לקבל אזהרות או שגיאות בשורת הפקודה כשגודל החבילה חורג מהמגבלה, מפעילים את רמזים לביצועים ב-webpack.config.js. זו דרך מצוינת לשמור על גודלי הנכסים לאורך כל תהליך הפיתוח.

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

פלט של Webpack עם הדגשה של bundle.js
קובץ bundle.js המודגש גדול מהתקציב שלכם

מגבלת ברירת המחדל גם לנכסים וגם לנקודות כניסה היא 250KB. אפשר להגדיר יעדים משלכם בקובץ התצורה.

אזהרה לגבי גודל החבילה של Webpack
אזהרה לגבי גודל החבילה של Webpack ⚠️

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

המלצה לאופטימיזציית הביצועים של Webpack
תכונה בונוס: webpack לא רק תזהיר אתכם, אלא גם תספק לכם המלצה על דרכים לצמצום הגודל של החבילות. 💁

Bundlesize

Bundlesize היא חבילת npm פשוטה שבה בודקים את גודל הנכס בהשוואה לסף שהגדרתם. אפשר להריץ אותו באופן מקומי ולשלב אותו עם ה-CI.

Bundlesize CLI

מריצים את bundlesize CLI ומציינים ערך סף ואת הקובץ שרוצים לבדוק.

bundlesize -f "dist/bundle.js" -s 170kB

הפלט של Bundlesize הוא תוצאות בדיקה בקוד צבע בשורה אחת.

נכשל בבדיקה של CLI של bundlesize
נכשל בבדיקה של CLI של bundlesize ❌
עוברים את הבדיקה של ה-CLI של bundlesize
עבר את הבדיקה של CLI של bundlesize ✔️

גודל החבילה ל-CI

כדי להפיק את המקסימום מ-bundlesize, כדאי לשלב אותו עם מערכת CI כדי לאכוף באופן אוטומטי מגבלות גודל על בקשות משיכה. אם הבדיקה של גודל החבילה נכשלת, בקשת המשיכה לא תעבור מיזוג. הוא פועל לבקשות משיכה ב-GitHub עם Travis CI,‏ CircleCI,‏ Wercker ו-Drone.

בדיקת הסטטוס של Bundlesize ב-GitHub
בדיקת סטטוס של Bundlesize ב-GitHub

יכול להיות שהאפליקציה שלכם מהירה היום, אבל הוספת קוד חדש יכולה לשנות את המצב הזה. בדיקת בקשות משיכה באמצעות bundlesize תעזור לכם למנוע נסיגה בביצועים. חברות כמו Bootstrap, ‏ Tinder, ‏ Trivago ועוד רבות משתמשות ב-Budget Optimizer כדי לעקוב אחרי התקציבים שלהן.

בעזרת bundlesize אפשר להגדיר ערכי סף לכל קובץ בנפרד. האפשרות הזו שימושית במיוחד אם אתם מפצלים חבילת מודולים באפליקציה.

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

בוט של Lighthouse

בוט של Lighthouse

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

דירוגים של Lighthouse 💯
ציונים של Lighthouse 💯

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

בדיקת הסטטוס של Lighthouse Bot ב-GitHub
בדיקת הסטטוס של בוט Lighthouse ב-GitHub

לאחר מכן, Lighthouse Bot ישתף תגובה לבקשת המשיכה עם ציונים מעודכנים. זוהי תכונה נהדרת שמעודדת שיחה על ביצועים בזמן ביצוע שינויים בקוד.

דיווח על דירוגים של Lighthouse בבקשות משיכה
דיווח על דירוגים של Lighthouse בבקשות משיכה 💬

אם בקשת המשיכה שלכם נחסמה בגלל ציון נמוך ב-Lighthouse, עליכם להריץ ביקורת באמצעות Lighthouse CLI או ב-Dev Tools. הוא יוצר דוח עם פרטים על צווארי בקבוק והצעות לאופטימיזציות פשוטות.

סיכום

כלי CLI CI סיכום
Lighthouse ✔️
  • תקציבים לסוגים שונים של משאבים על סמך הגודל או המספר שלהם.
webpack ✔️
  • תקציבים שמבוססים על גדלים של נכסים שנוצרו על ידי webpack.
  • בדיקת הגדלים ללא דחיסה.
bundlesize ✔️ ✔️
  • תקציבים שמבוססים על הגדלים של משאבים ספציפיים.
  • בודקת גדלים דחוסים או לא דחוסים.
בוט של Lighthouse ✔️
  • תקציבים שמבוססים על ציונים של Lighthouse.