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

Milica Mihajlija

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

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

מדידה

ה-codelab הזה כבר מכיל את האפליקציה שצורפה ל-webpack.

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

webpack

חבילת ה-bundle הראשית מודגשת בצהוב כי היא גדולה מ-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)

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

הערכים האפשריים של hints הם:

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

אופטימיזציה

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

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

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

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

ב-app/components/Countdown.jsx מסירים את:

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

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

const moment = require('moment');

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