Debug: Webpack bundle too large

Production JavaScript bundle is too large, causing slow page loads. Need to identify and reduce bundle bloat.

Step-by-step bundle analysis and reduction:

1. Analyze bundle contents:

npm install --save-dev webpack-bundle-analyzer
# In webpack config:
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
plugins: [new BundleAnalyzerPlugin()]
# Or for Next.js:
npx @next/bundle-analyzer

1. Common culprits and fixes:

a) moment.js (300KB) -> dayjs (2KB) or date-fns (tree-shakeable)
b) lodash (70KB) -> lodash-es (tree-shakeable) or native methods
c) Full icon libraries -> import specific icons
Bad: import { icons } from 'lucide-react'
Good: import { Search } from 'lucide-react'

1. Code splitting:

// Dynamic imports
const Heavy = React.lazy(() => import('./HeavyComponent'));
// Route-based splitting (Next.js does this automatically)

1. Tree shaking prerequisites:

- Use ES modules (import/export), not CommonJS (require)
- Set sideEffects: false in package.json
- Avoid barrel files (index.ts re-exporting everything)

1. Check for duplicates:

npx webpack --stats | grep -i duplicate
# Or use duplicate-package-checker-webpack-plugin