Vite plugin for automatic bundle size analysis and tracking.
npm install @milencode/bundlewatch-vite-pluginVite plugin for automatic bundle size analysis and tracking.
``bash`
pnpm add -D @bundle-watch/vite-plugin
Add to your vite.config.ts:
`typescript
import { defineConfig } from 'vite';
import { bundleWatch } from '@bundle-watch/vite-plugin';
export default defineConfig({
plugins: [
bundleWatch({
// Options (all optional)
enabled: true,
printReport: true,
saveToGit: true, // Auto-enabled in CI
compareAgainst: 'main',
failOnSizeIncrease: false,
sizeIncreaseThreshold: 10,
}),
],
});
`
- enabled: Enable/disable the plugin (default: true)printReport
- : Print analysis report to console (default: true)saveToGit
- : Save metrics to git branch (default: true in CI, false locally)compareAgainst
- : Branch to compare against (default: 'main')failOnSizeIncrease
- : Fail build if size exceeds threshold (default: false)sizeIncreaseThreshold
- : Size increase threshold percentage (default: 10)
After each build, you'll see a report like:
`
š Bundle Watch Report
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Total Size: 245.5 KB
Gzipped: 89.2 KB
Brotli: 78.1 KB
Build Time: 3.24s
Chunks: 3
By Type:
JavaScript: 185.3 KB
CSS: 45.2 KB
Images: 15.0 KB
Fonts: 0 B
Other: 0 B
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Comparison vs main:
š Bundle is 12.5 KB (4.8%) smaller than main
š” Insights:
ā
Great job! Bundle size reduced by 4.8%
š¦ index.js grew by 3.2 KB (7.2%)
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
``
The plugin automatically detects CI environments and saves metrics to a git branch for historical tracking.
See the main @bundle-watch/core documentation for more details.