שילוב תקציבי ביצועים בתהליך ה-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 כדי לאכוף באופן אוטומטי את מגבלות הגודל על בקשות משיכה, תוכלו להפיק את המקסימום מנפח החבילה. אם בדיקת גודל ה-bundlesize תיכשל, בקשת המשיכה הזו לא תמוזג. היא מתאימה לבקשות משיכה ב-GitHub עם Travis CI, CircleCI, Wercker ו-Drone.

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

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

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

רובוט של מגדלור

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

סיכום