A Vite plugin to generate bundle stats metrics.
npm install vite-bundle-stats-metricsA Vite plugin that provides detailed bundle size statistics for your project. It generates a report in JSON, CSV, or TXT format and can optionally display the results in the console.
---
Install via npm:
``sh`
npm install vite-bundle-stats-metrics --save-dev
Or using yarn:
`sh`
yarn add vite-bundle-stats-metrics --dev
---
In your vite.config.ts, import and add the plugin:
`ts
import { defineConfig, PluginOption } from 'vite';
import bundleStatsMetrics from 'vite-bundle-stats-metrics';
export default defineConfig({
plugins: [
bundleStatsMetrics({
outputFile: 'dist/bundle-stats',
format: 'json', // Available options: 'json' | 'txt' | 'csv'
logToConsole: 'summary', // 'summary' | 'detailed' | false
warnThreshold: 500 // KiB - Logs a warning if exceeded
}) as PluginOption
]
});
`
---
| Option | Type | Default | Description |
|---------------|-----------------------------------|--------------------------|-------------|
| outputFile | string | 'bundle-stats.json' | Path for the output file. The extension changes based on format. |format
| | 'json' \| 'txt' \| 'csv' | 'json' | Format of the output file. |logToConsole
| | boolean \| 'summary' \| 'detailed' | false | Logs bundle stats in console as a summary or detailed report. |warnThreshold
| | number | undefined | Logs a warning if the bundle size exceeds this threshold in KiB. |
---
1. Identify the Largest File in Your Bundle
- Example: "largestChunk": { "name": "Largest file size", "extension": "js", "value": 198.01, "unit": "KiB" }
- Helps optimize large JavaScript or CSS files to improve performance.
2. Understand Asset Size Distribution
- Example: "assets": { "value": 367.66, "name": "Assets size", "extension": "", "unit": "KiB" }
- Gives insight into how much total space is taken by assets.
3. Analyze File Type Breakdown
- Example: "extensions": { "css": { "name": ".css files size", "extension": "css", "value": 169.65, "unit": "KiB" }, "js": { "name": ".js files size", "extension": "js", "value": 198.01, "unit": "KiB" } }
- Helps pinpoint if JavaScript, CSS, or other files are bloating the bundle.
4. Monitor Bundle Size for Performance Optimization
- Example: "bundle": { "value": 367.66, "name": "Bundle size including assets", "extension": "", "unit": "KiB" }
- Useful for tracking bundle size growth over time.
5. Track Build Time for Performance Analysis
- Example: "buildTime": { "value": 2.179, "name": "Build time", "extension": "", "unit": "seconds" }
- Helps developers identify slow builds and improve build performance.
---
json
{
"largestChunk": { "name": "Largest file size", "extension": "js", "value": 198.01, "unit": "KiB" },
"assets": { "value": 367.66, "name": "Assets size", "extension": "", "unit": "KiB" },
"extensions": {
"css": { "name": ".css files size", "extension": "css", "value": 169.65, "unit": "KiB" },
"js": { "name": ".js files size", "extension": "js", "value": 198.01, "unit": "KiB" }
},
"bundle": { "value": 367.66, "name": "Bundle size including assets", "extension": "", "unit": "KiB" },
"buildTime": { "value": 2.179, "name": "Build time", "extension": "", "unit": "seconds" }
}
`$3
`sh
š Bundle Size: 367.66 KiB
`$3
`sh
š Bundle Stats:
{
largestChunk: { name: 'Largest file size', extension: 'js', value: 198.01, unit: 'KiB' },
assets: { value: 367.66, name: 'Assets size', extension: '', unit: 'KiB' },
extensions: {
css: { name: '.css files size', extension: 'css', value: 169.65, unit: 'KiB' },
js: { name: '.js files size', extension: 'js', value: 198.01, unit: 'KiB' }
},
bundle: { value: 367.66, name: 'Bundle size including assets', extension: '', unit: 'KiB' },
buildTime: { value: 2.179, name: 'Build time', extension: '', unit: 'seconds' }
}
``---
Want to contribute? Feel free to open an issue or submit a pull request! š
---
This project is licensed under the MIT License.
---