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

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

Ivan Akulov

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

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

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

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

מרכז בקרה של Webpack

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

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

כדי להפעיל אותו, מתקינים את החבילה 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());

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

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

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

קריאה נוספת

• אלכס ראסל על זמן הטעינה בעולם האמיתי שאנחנו צריכים יעד

ניתוח הסיבות לגודל הגדול של החבילה

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

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

• יחסי תלות גדולים למה הם גדולים כל כך? האם יש חלופות קטנות יותר (למשל, Preact במקום React)? האם צריך להשתמש בכל הקוד שהוא כולל (למשל, 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