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

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

Ivan Akulov

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

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

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

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

webpack-dashboard

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

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

איך בודקים את הגדלים המקסימליים

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

2. צריך להוסיף את הקטע bundlesize אל package.json עם הערכים הבאים content:

   // 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(),
  ],
};

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

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

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

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

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

סיכום

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