באילו כלים אפשר להשתמש כדי לעקוב אחר חבילת ה-Webpack ולנתח אותה
גם אם מגדירים את חבילת ה-webpack כך שתהיה אפליקציה קטנה ככל האפשר, עדיין חשוב לעקוב אחריה ולדעת מה היא כוללת. אחרת, תוכלו להתקין תלות שתגדיל את האפליקציה פי שניים – ואפילו לא תבחינו בה!
בקטע הזה מתוארים כלים שיעזרו לכם להבין את החבילה.
מעקב אחר גודל החבילה
כדי לעקוב אחרי גודל האפליקציה, השתמשו במרכז הבקרה של webpack במהלך הפיתוח ובגודל החבילה ב-CI.
webpack-לוח בקרה
webpack-dashboard משפר את הפלט של חבילת ה-webpack עם גדלים של יחסי תלות, התקדמות ופרטים נוספים. כך זה נראה:
![צילום מסך של הפלט של לוח הבקרה ב-webpack](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=5&hl=he)
בעזרת מרכז הבקרה הזה אפשר לעקוב אחרי יחסי תלות גדולים – אם מוסיפים אחד כזה, הוא יופיע מיד בקטע 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 כדי לקבל התראה כשהאפליקציה גדולה מדי:
![צילום מסך של הקטע CI של בקשת משיכה ב-GitHub. בין כלי ה-CI, יש פלט מסוג Bundlesize](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=5&hl=he)
כדי להגדיר אותה:
מידע על גדלים מקסימליים
אופטימיזציה של האפליקציה כך שהיא תהיה קטנה ככל האפשר. מריצים את גרסת ה-build של סביבת הייצור.
מוסיפים את הקטע
bundlesize
ל-package.json
עם התוכן הבא:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
מבצעים
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
מוסיפים 10-20% לכל מידה כדי לקבל את המידות המקסימליות. כך תוכלו לפתח את האפליקציה כרגיל, ולהזהיר אתכם אם היא תגדל יותר מדי.
הפעלה של
bundlesize
התקנה של חבילת
bundlesize
כתלוית פיתוח:npm install bundlesize --save-dev
בקטע
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", } ] }
מוסיפים סקריפט npm כדי להריץ את הבדיקה:
// package.json { "scripts": { "check-size": "bundlesize" } }
צריך להגדיר את ה-CI כדי לבצע
npm run check-size
בכל דחיפה. (ולשלב אתbundlesize
עם GitHub אם אתם מפתחים את הפרויקט בו).
סיימתם! עכשיו, אם מריצים npm run check-size
או דוחפים את הקוד, אפשר לראות אם קובצי הפלט קטנים מספיק:
![צילום מסך של הפלט של גודל החבילה. כל תוצאות ה-build מסומנות ב-'Pass'](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=5&hl=he)
לחלופין, במקרה של כשל:
![צילום מסך של הפלט של גודל החבילה. חלק מתוצאות ה-build מסומנות במילה 'Fail'](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=5&hl=he)
קריאה נוספת
- אלכס ראסל על זמן הטעינה בפועל שעלינו להתמקד בו
ניתוח הסיבה לחבילה כל כך גדולה
כדאי להתעמק בחבילה כדי לראות אילו מודולים תופסים מקום בה. ניתוח חבילת 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