Analyze your JavaScript bundle size and identify opportunities for optimization.
| Name | Size | Share |
|---|---|---|
src/App.tsx | 45.0 KB | 18.4% |
src/components/ | 89.0 KB | 36.3% |
src/utils/ | 23.0 KB | 9.4% |
src/hooks/ | 15.0 KB | 6.1% |
| Name | Size | Share |
|---|---|---|
react | 42.0 KB | 10.2% |
react-dom | 128.0 KB | 31.1% |
lodash | 72.0 KB | 17.5% |
@tanstack/react-query | 48.0 KB | 11.7% |
| Name | Size | Share |
|---|---|---|
tailwind.css | 65.0 KB | 73% |
components.css | 24.0 KB | 27% |
JavaScript bundle analysis with chunk breakdown. Visual size bars, module lists, and gzip comparisons. Color-coded by type: app code, vendor, assets.
devtools92
Bundle breakdown with chunk list showing size, gzip, and module counts. Large chunk warnings, percentage bars, and change indicators for tracking growth.
devtools6
Terminal-style structured log viewer with level filtering. Color-coded INFO, WARN, ERROR, and DEBUG entries with timestamps and source labels.
devtools14
Interactive JSON editor with format, minify, and real-time validation. Valid/invalid status badge, copy button, and syntax error display.
devtools20
Unified code diff viewer with dark terminal background. Green additions, red deletions, and gray context lines with file headers.