מעקב אחר האפליקציה וניתוח שלה

אילו כלים כדאי להשתמש בהם כדי לעקוב אחרי חבילת ה-Webpack ולנתח אותה

Ivan Akulov

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

בקטע הזה מתוארים כלים שיעזרו לכם להבין את החבילה.

מעקב אחר גודל החבילה

כדי לעקוב אחרי גודל האפליקציה, משתמשים ב-webpack-dashboard במהלך הפיתוח וב-bundlesize ב-CI.

מרכז בקרה של Webpack

webpack-dashboard משפר את הפלט של webpack ומוסיף לו את הגדלים של יחסי התלות, ההתקדמות ופרטים נוספים. כך זה נראה:

לוח הבקרה הזה עוזר לעקוב אחרי יחסי תלות גדולים – אם תוסיפו קישור כזה, הוא יופיע מיד בקטע Modules (מודולים)!

כדי להפעיל אותו, מתקינים את החבילה webpack-dashboard:

npm install webpack-dashboard --save-dev

מוסיפים את הפלאגין לקטע plugins בתצורה:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

או להשתמש ב-compiler.apply() אם משתמשים בשרת פיתוח מבוסס Express:

compiler.apply(new DashboardPlugin());

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

bundlesize

bundlesize מאמת שנכסי ה-webpack לא חורגים מהגודל שצוין. אפשר לשלב אותו עם מערכת לניהול גרסאות (CI) כדי לקבל התראה כשהאפליקציה גדלה מדי:

כדי להגדיר אותה:

הגדלים המקסימליים

1. מומלץ לבצע אופטימיזציה של האפליקציה כדי שהיא תהיה קטנה ככל האפשר. מריצים את build לסביבת הייצור.

2. מוסיפים את הקטע bundlesize לקובץ package.json עם התוכן הבא:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. מפעילים את bundlesize עם npx:

   npx bundlesize
   

   הפקודה הזו תדפיס את הגודל של כל קובץ בפורמט gzip:

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. מוסיפים 10-20% לכל מידה, ומקבלים את הגדלים המקסימליים. מרווח של 10-20% יאפשר לכם לפתח את האפליקציה כרגיל, תוך מתן אזהרה כשהגודל שלה יגדל יותר מדי.

   הפעלה של bundlesize

5. מתקינים את החבילה bundlesize כחבילת תלות לפיתוח:

   npm install bundlesize --save-dev
   

6. בקטע bundlesize ב-package.json, מציינים את הגדלים המקסימליים הבטון. בקבצים מסוימים (למשל, תמונות), כדאי לציין את הגודל המקסימלי לכל סוג קובץ, ולא לכל קובץ:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. מוסיפים סקריפט npm כדי להריץ את הבדיקה:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. מגדירים את ה-CI כך שיפעיל את npm run check-size בכל דחיפה. (ולשלב את bundlesize עם GitHub אם אתם מפתחים את הפרויקט שבו.)

זהו! עכשיו, אם מריצים npm run check-size או דוחפים את הקוד, אפשר לראות אם קובצי הפלט קטנים מספיק:

או במקרה של כשלים:

קריאה נוספת

• Alex Russell על זמן הטעינה בפועל שאנחנו צריכים לטרגט

רוצה לבדוק למה החבילה כל כך גדולה?

כדאי לחקור לעומק את החבילה כדי לראות אילו מודולים תופסים מקום בתוכה. נעים להכיר: webpack-bundle-analyzer:

(הקלטת מסך מהאתר github.com/webpack-contrib/webpack-bundle-analyzer)

webpack-bundle-analyzer סורק את החבילה ויוצר תצוגה חזותית של מה שמכילה. אפשר להשתמש בתצוגה החזותית הזו כדי למצוא יחסי תלות גדולים או מיותרים.

כדי להשתמש בניתוח, צריך להתקין את החבילה webpack-bundle-analyzer:

npm install webpack-bundle-analyzer --save-dev

הוספת פלאגין להגדרת ה-webpack:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

מריצים את ה-build של סביבת הייצור. הפלאגין יפתח את דף הנתונים הסטטיסטיים בדפדפן.

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

הערה: אם משתמשים ב-ModuleConcatenationPlugin, יכול להיות שהוא ישלב חלק מהמודולים בפלט של webpack-bundle-analyzer, וכתוצאה מכך הדוח יהיה פחות מפורט. אם אתם משתמשים בפלאגין הזה, צריך להשבית אותו במהלך הניתוח.

אלה הפרטים שצריך לחפש בדוח:

• יחסי תלות גדולים. למה הם גדולים כל כך? האם יש חלופות קטנות יותר (למשל, הקדמה במקום תגובה)? האם אתם משתמשים בכל הקוד שהוא כולל (למשל, Moment.js כולל הרבה לוקליזציות שלרוב לא נעשה בהן שימוש ואפשר להסיר אותן)?
• יחסי תלות כפולים. האם אותה ספרייה מופיעה בכמה קבצים? (אפשר להשתמש, למשל, באפשרות optimization.splitChunks.chunks – ב-webpack 4 – או באפשרות CommonsChunkPlugin – ב-webpack 3 – כדי להעביר אותו לקובץ משותף). או שיש לחבילה כמה גרסאות של אותה ספרייה?
• יחסי תלות דומים. האם יש ספריות דומות שמבצעות את אותה עבודה בערך? (למשל moment ו-date-fns, או lodash ו-lodash-es). נסו להשתמש בכלי אחד בלבד.

מומלץ גם לעיין בניתוח מעולה של חבילות webpack של Sean Larkin.

סיכום

• שימוש ב-webpack-dashboard וב-bundlesize כדי לבדוק את גודל האפליקציה
• בודקים מה גורם לגודל הגדול באמצעות webpack-bundle-analyzer