Ask Claude to Analyse and Reduce Your JavaScript Bundle Size

A bloated JavaScript bundle silently kills your app's load time — generate a bundle analysis and let Claude tell you exactly where the fat is and how to cut it.

# Generate an analysis first (pick your bundler)
npx vite-bundle-visualizer       # for Vite
npx webpack-bundle-analyzer      # for Webpack

# Then describe it to Claude or paste the JSON output:
claude -p "Here's my bundle analysis output. Which dependencies are unusually large,
which look like duplicates, and what's the fix for each one?"

Claude identifies the most common culprits and writes the fix inline — cherry-picked imports, smaller alternatives, and lazy loading:

// Before: imports entire lodash (70kb gzipped)
import _ from 'lodash';
const sorted = _.sortBy(items, 'name');

// After (Claude's fix): import only what you need
import sortBy from 'lodash/sortBy';
const sorted = sortBy(items, 'name');

For route-based code splitting, Claude identifies which components should be loaded lazily and writes the updated dynamic import() wrappers:

// Claude adds React.lazy where it makes sense
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings = React.lazy(() => import('./pages/Settings'));

It'll also flag when a dependency like moment.js should be swapped entirely for a lighter alternative like date-fns or Temporal.

Bundle size is one of the highest-ROI performance wins — and Claude can identify every opportunity in a single pass.