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

Milica Mihajlija

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

תקציבי ביצועים של Lighthouse

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

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

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

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

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

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

רמזים לביצועי Webpack

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

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

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

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

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

גודל מקבץ

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

CLI בגודל חבילה

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

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

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

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

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

אולי יש לכם היום אפליקציה מהירה, אבל הוספת קוד חדש יכולה לשנות את זה לעיתים קרובות. בדיקה של בקשות משיכה באמצעות Bundlesize תעזור לך למנוע רגרסיות של ביצועים. Bootstrap, Tinder, Trivago ורבים אחרים משתמשים בו כדי לנהל את התקציבים שלהם בצורה טובה.

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

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

בוט מגדלור

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

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

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

סיכום