הגדרת תקציבי ביצועים באמצעות Webpack

מיליקה מיהאג'ליג'ה

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

כדי לראות אותה בפעולה, הנה אפליקציה שסופרת את הימים שנותרו עד ראש השנה. הוא מבוסס על React ו-moment.js. (בדיוק כמו אפליקציות בעולם האמיתי שמסתמכות יותר ויותר על מסגרות וספריות. 😉)

מדידה

ה-codelab הזה כבר מכיל את האפליקציה בחבילה עם חבילת Webpack.

1. לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
2. לוחצים על טרמינל (הערה: אם הלחצן 'מסוף' לא מוצג, ייתכן שתצטרכו להשתמש באפשרות 'מסך מלא').
3. כדי לקבל רשימה של נכסים בקידוד לפי צבעים והגדלים שלהם, מקלידים webpack במסוף.

webpack

החבילה הראשית מודגשת בצהוב כי היא גדולה מ-244KiB (250KB).

האזהרות האלה מופעלות כברירת מחדל במצב ייצור, וסף ברירת המחדל הוא 244KiB לא דחוס לנכסים וגם לנקודות כניסה (השילוב של כל הנכסים שנעשה בהם שימוש בטעינה הראשונית של הדף).

חבילת Webpack לא רק תזהיר אתכם, אלא גם תיתן לכם המלצה לצמצם את גודל החבילות. מידע נוסף על השיטות המומלצות זמין ב-Web Fundamentals (היסודות של בניית אתרים).

הגדרת תקציב ביצועים בהתאמה אישית

תקציב הביצועים המתאים תלוי באופי הפרויקט. תמיד כדאי לבצע מחקר בעצמכם. כלל אצבע טוב הוא לספק פחות מ-170KB של משאבים של נתיב קריטי דחוסים או מוקטנים.

בהדגמה פשוטה זו, כדאי להיות שמרניים יותר ולהגדיר תקציב של 100KB (97.7KiB). ב-webpack.config.js, צריך להוסיף את הפרטים הבאים:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

תקציב הביצועים החדש מוגדר בבייטים:

• 100,000 בייטים לנכסים נפרדים (maxAssetSize)
• 100,000 בייטים לנקודת הכניסה (maxEntrypointSize)

במקרה כזה, יש רק חבילה אחת שמשמשת גם כנקודת הכניסה.

ערכים אפשריים לרמזים הם:

1. warning (ברירת המחדל): הצגת הודעת אזהרה בצהוב, אבל ה-build עובר. מומלץ להשתמש באפשרות הזו בסביבות פיתוח.
2. error: תוצג הודעת שגיאה אדומה, אבל ה-build עדיין יעבור. מומלץ להשתמש בהגדרה הזו בגרסאות build לייצור.
3. false: לא מוצגות אזהרות או שגיאות.

אופטימיזציה

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

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

בעולם האמיתי, בדרך כלל קשה להחליף מסגרות גדולות בצד הלקוח, ולכן חשוב להשתמש בהן בחוכמה. לאחר מחקר קצר אפשר בדרך כלל למצוא חלופות קטנות יותר לספריות פופולריות שעושות את העבודה באותה מידה (date-fns הוא חלופה טובה ל-moment.js). לפעמים כדאי יותר לא להשתמש ב-framework או בספרייה אם יש להם השפעה משמעותית על הביצועים.

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

בקטע app/components/Countdown.jsx מסירים את:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

ותמחק את השורה הזו:

const moment = require('moment');

זה דורש קצת חשבון, אבל אפשר להטמיע את אותה ספירה לאחור בעזרת vanilla JavaScript:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

עכשיו מסירים את moment.js מ-package.json ומריצים שוב את Webpack במסוף כדי ליצור את החבילה המותאמת.

והנה! הוצאת 223KiB (230KB) והאפליקציה לא אושרה במסגרת התקציב.🎉

צג

כדי להגדיר תקציב ביצועים ב-webpack צריך רק כמה שורות קוד, ואתם תקבלו אזהרה אם אתם מוסיפים (בטעות) תלות גדולה. אי אפשר למצוא את הטענה הזו מהר, אבל Webpack יכול לוודא שאתם מודעים להשלכות על הביצועים בכל זמן.