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

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

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

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

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

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

   הפעלה של 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 או דוחפים את הקוד, אפשר לראות אם קובצי הפלט קטנים מספיק:

לחלופין, במקרה של כשל:

קריאה נוספת

• אלכס ראסל על זמן הטעינה בפועל שעלינו להתמקד בו

ניתוח הסיבה לחבילה כל כך גדולה

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

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

מה צריך לחפש בדוח:

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

כדאי גם לקרוא את הניתוח הנפלא של חבילות Webpack של שון לארקין.

מסכם

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