Version: 0.9.1 Last Updated: February 9, 2026

# Analyze bundle sizes (visual)
pnpm build:analyze

# Run Lighthouse audit
pnpm lighthouse

# Generate bundle report
tsx scripts/analyze-bundle.ts

# Type check (performance impact)
pnpm type-check

# Build for production
pnpm build

1. Lazy Load Recharts

   import { LazyAnalyticsCharts } from '@/lib/performance/lazy-loader'
   // Use in admin analytics pages

2. Code Split Admin Routes

   // Already supported by Next.js App Router
   // Keep admin pages in separate route groups

3. Lazy Load GDPR Tools

   const LazyGDPR = dynamic(() => import('@/components/gdpr-tools'), {
     loading: () => <Skeleton />,
     ssr: false
   })

4. Lazy Load TipTap Editor

   import { LazyRichTextEditor } from '@/lib/performance/lazy-loader'

5. Lazy Load Emoji Picker

   import { LazyEmojiPicker } from '@/lib/performance/lazy-loader'

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <div>Loading...</div>,
  ssr: false
})

import { measureFunction } from '@/lib/performance/performance-monitor'

const result = await measureFunction('my-operation', async () => {
  // Your code here
  return data
}, true) // true = log to console

import { checkPerformanceBudget } from '@/lib/performance/performance-monitor'

// Returns true if within budget
const isGood = checkPerformanceBudget()

import { prefetchCallComponents } from '@/lib/performance/lazy-loader'

<button
  onMouseEnter={prefetchCallComponents}
  onClick={startCall}
>
  Start Call
</button>

• Lazy load heavy components (>50KB)
• Use dynamic imports for admin/settings
• Implement virtual scrolling for long lists
• Memoize expensive calculations
• Use React.memo for pure components
• Monitor bundle sizes in CI/CD
• Profile with React DevTools
• Check Web Vitals regularly

• Import entire libraries at top level
• Load all features upfront
• Ignore bundle size warnings
• Skip lazy loading for charts/editors
• Use heavy animations on every render
• Forget to clean up event listeners
• Ignore memory leaks
• Skip performance budgets

1. Run pnpm build:analyze
2. Identify largest chunks
3. Lazy load heavy components
4. Code split routes

1. Check Web Vitals
2. Run Lighthouse audit
3. Profile with Chrome DevTools
4. Check network waterfall

1. Check console for warnings
2. Use performance monitor
3. Look for memory leaks
4. Profile with Chrome DevTools

1. Use React Profiler
2. Check component re-renders
3. Add memoization
4. Optimize expensive calculations

• Documentation: /docs/PERFORMANCE-OPTIMIZATIONS.md
• Audit Report: /docs/PERFORMANCE-AUDIT.md
• Bundle Analysis: /docs/BUNDLE-ANALYSIS.md
• Task Report: /TASK-136-PERFORMANCE-REPORT.md

Generated: February 9, 2026 Next Review: March 9, 2026