Interactive dashboard and visualization for Bundle Watch metrics.
npm install @milencode/bundlewatch-dashboardInteractive dashboard and visualization for Bundle Watch metrics.
- πΊοΈ Treemap Visualization - See what's taking up space in your bundle
- π Historical Charts - Track bundle size over time
- π Dependency Analysis - Find duplicate dependencies
- π― Compare View - Diff any two builds
- π₯οΈ Local Server - Development dashboard at http://localhost:3333
- π Static Export - Generate shareable HTML reports
``bash`
pnpm add -D @bundlewatch/dashboard
Start an interactive dashboard on http://localhost:3333:
`bash`
bundlewatch serve
Options:
`bash`
bundlewatch serve \
--port 4000 \
--host 0.0.0.0 \
--no-open \
--data-source git \
--git-branch bundlewatch-data
Generate a self-contained HTML report:
`bash`
bundlewatch export
Options:
`bash`
bundlewatch export dist --output ./bundle-report
This creates:
- ./bundle-report/index.html - Interactive dashboard./bundle-report/data.json
- - Raw metrics data
`yaml.github/workflows/bundlewatch.yml
- name: Build
run: pnpm build
- name: Generate Dashboard
run: npx bundlewatch export dist --output ./dashboard
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dashboard
`
Your dashboard will be at: https://yourusername.github.io/your-repo/
`typescript
import { createDashboard, exportStatic } from '@bundlewatch/dashboard';
import { collectMetrics } from '@bundlewatch/core';
// Collect metrics
const metrics = await collectMetrics({
outputDir: './dist',
buildStartTime: Date.now(),
});
// Export static HTML
await exportStatic({
output: './bundle-report',
metrics,
});
// Or start server
await createDashboard({
port: 3333,
dataSource: 'git',
open: true,
});
`
- h3 - Fast, lightweight server
- Chart.js - Beautiful charts
- Vanilla JS - No framework bloat
- Self-contained - Single HTML file
`bashOpen in browser
open ./bundle-report/index.html
$3
- Commit
./bundle-report` to repoMIT