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

Milica Mihajlija

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

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

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

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

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

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

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

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

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

טיפים לגבי הביצועים של חבילת Webpack

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

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

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

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

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

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

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

הערה: נכסים דחוסים משפיעים על זמן ההעברה, שהוא חשוב מאוד ברשתות איטיות.

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

Bundlesize

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

Bundlesize CLI

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

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

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

נכשל בבדיקה של CLI של bundlesize ❌

עבר את הבדיקה של CLI של bundlesize ✔️

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

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

סטטוס בדיקת גודל החבילה ב-GitHub

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

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

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

בוט של Lighthouse

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

ציונים ב-Lighthouse GOAL

בוט 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 ב-GitHub

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

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

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

סיכום

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