optimize-bundle

Analyze bundle size and optimize for production.

Instructions

1. Run bundle analysis
2. Identify large dependencies
3. Find unused code
4. Implement optimization strategies
5. Generate optimization report

Analysis Tools

Next.js

# Install bundle analyzer
npm install -D @next/bundle-analyzer

# Configure next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // your config
})

# Run analysis
ANALYZE=true npm run build

Vite

# Install rollup plugin
npm install -D rollup-plugin-visualizer

# Add to vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

plugins: [
  visualizer({
    open: true,
    gzipSize: true,
    brotliSize: true,
  })
]

# Run build
npm run build

General

# webpack-bundle-analyzer
npm install -D webpack-bundle-analyzer

# source-map-explorer
npm install -D source-map-explorer
npm run build
npx source-map-explorer 'build/static/js/*.js'

Optimization Strategies

1. Code Splitting

// Dynamic imports
const HeavyComponent = lazy(() => import('./HeavyComponent'))

// Route-based splitting (Next.js)
export default function Page() {
  return <div>Auto code-split by route</div>
}

// Conditional loading
if (userNeedsFeature) {
  const module = await import('./feature')
  module.initialize()
}

2. Tree Shaking

// ❌ Bad - imports entire library
import _ from 'lodash'

// ✅ Good - imports only what's needed
import debounce from 'lodash/debounce'

// For shadcn/ui - already optimized!
// Components are copied, not imported from package

3. Component Optimization

// Memoize expensive components
const MemoizedComponent = memo(ExpensiveComponent)

// Lazy load heavy components
const Chart = lazy(() => import('./Chart'))

<Suspense fallback={<Skeleton />}>
  <Chart />
</Suspense>

4. Asset Optimization

// Next.js Image optimization
import Image from 'next/image'

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority
  alt="Hero"
/>

// Font optimization
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})