Bundler Analyze

Bundle Analyzer

Use the bash tool to analyze JavaScript bundle sizes.

Setup

Node.js (required for npx):

• macOS: brew install node
• Ubuntu: sudo apt install nodejs npm

Run npm run build first to generate stats; then use npx with vite-bundle-visualizer, webpack-bundle-analyzer, etc.

Vite

npx vite-bundle-visualizer 2>/dev/null
# generates stats.html

npx rollup-plugin-visualizer 2>/dev/null

Webpack

npx webpack-bundle-analyzer stats.json 2>/dev/null
# First generate stats:
npx webpack --profile --json > stats.json

Size Check (quick)

# Check build output sizes
ls -lhS dist/assets/*.js 2>/dev/null | head -20
ls -lhS dist/assets/*.css 2>/dev/null | head -10

# Total bundle size
du -sh dist/ 2>/dev/null

Import Cost

npx import-cost <file.ts> 2>/dev/null

Tips

• Run after npm run build to see actual production sizes
• Check for large dependencies with npm ls --depth=0
• Use dynamic import() for code splitting
• Compare sizes before/after changes

Converted and distributed by TomeVault — claim your Tome and manage your conversions.