באילו כלים אפשר להשתמש כדי לעקוב אחר חבילת ה-webpack ולנתח אותה
גם אם אתם מגדירים את ה-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:
כדי להגדיר אותה:
איך בודקים את הגדלים המקסימליים
מומלץ לבצע אופטימיזציה של האפליקציה כדי שהיא תהיה קטנה ככל האפשר. מפעילים את גרסת ה-build לסביבת הייצור.
צריך להוסיף את הקטע
bundlesize
אלpackage.json
עם הערכים הבאים content:// 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% לכל מידה כדי לקבל את המידות המקסימליות. שיעור שולי הרווח של 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
או דוחפים את הקוד, אפשר לראות אם קובצי הפלט
קטן מספיק:
לחלופין, במקרה של כשלים:
קריאה נוספת
מה הסיבה שהחבילה גדולה כל כך
כדאי לחקור לעומק את החבילה כדי לראות אילו מודולים תופסים מקום בתוכה. פגישות 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