veza/apps/web/docs/HEAVY_COMPONENTS_AUDIT.md

# Heavy Components Audit

**Date**: 2025-01-27  
**Action**: 6.2.1.3 - Identify heavy components  
**Status**: ✅ Complete

## Summary

This audit identifies all heavy components, large libraries, and components that could benefit from dynamic imports to reduce initial bundle size.

## Already Lazy-Loaded Components ✅

### 1. **EmojiPicker** (`emoji-picker-react`)
- **Size**: ~200KB
- **Location**: 
  - `apps/web/src/features/chat/components/ChatInput.tsx`
  - `apps/web/src/features/chat/components/ChatMessage.tsx`
- **Status**: ✅ Already lazy loaded with `React.lazy()`
- **Impact**: ~200KB saved from initial bundle

### 2. **ImageCropper** (`react-easy-crop`)
- **Size**: ~100KB
- **Location**: `apps/web/src/components/ui/ImageCropper.tsx`
- **Status**: ✅ Already lazy loaded with `React.lazy()` (currently mocked)
- **Impact**: ~100KB saved from initial bundle

### 3. **Toaster** (`react-hot-toast`)
- **Size**: Medium
- **Location**: `apps/web/src/components/feedback/LazyToaster.tsx`
- **Status**: ✅ Already lazy loaded via `LazyToaster` component
- **Impact**: Isolated in vendor-toast chunk

## Chart Components (Lightweight) ✅

### 1. **LineChart**
- **Location**: `apps/web/src/components/charts/LineChart.tsx`
- **Library**: Custom SVG-based implementation
- **Size**: Lightweight (no external chart library)
- **Status**: ✅ No lazy loading needed (lightweight)

### 2. **BarChart**
- **Location**: `apps/web/src/components/charts/BarChart.tsx`
- **Library**: Custom SVG-based implementation
- **Size**: Lightweight (no external chart library)
- **Status**: ✅ No lazy loading needed (lightweight)

### 3. **PieChart**
- **Location**: `apps/web/src/components/charts/PieChart.tsx`
- **Library**: Custom SVG-based implementation
- **Size**: Lightweight (no external chart library)
- **Status**: ✅ No lazy loading needed (lightweight)

## Heavy Libraries (Already in Vendor Chunks) ✅

### 1. **hls.js**
- **Size**: Large (~200KB+)
- **Status**: ✅ Already in `vendor-media` chunk
- **Usage**: Streaming audio/video

### 2. **@tanstack/react-virtual**
- **Size**: Medium
- **Status**: ✅ Already in `vendor-tanstack` chunk
- **Usage**: Virtual scrolling

### 3. **@tanstack/react-query**
- **Size**: Medium
- **Status**: ✅ Already in `vendor-tanstack` chunk
- **Usage**: Data fetching

### 4. **lucide-react**
- **Size**: Large (238 files use it)
- **Status**: ✅ Already in `vendor-icons` chunk
- **Usage**: Icons throughout the app

### 5. **date-fns**
- **Size**: Medium
- **Status**: ✅ Already in `vendor-dates` chunk
- **Usage**: Date utilities

### 6. **zod**
- **Size**: Medium
- **Status**: ✅ Already in `vendor-validation` chunk
- **Usage**: Schema validation

## Feature Chunks (Already Configured) ✅

### 1. **Player Components**
- **Location**: `apps/web/src/features/player/`
- **Status**: ✅ Already in `feature-player` chunk
- **Size**: Large (audio player, controls, visualizations)

### 2. **Upload Components**
- **Location**: `apps/web/src/features/upload/`
- **Status**: ✅ Already in `feature-upload` chunk
- **Size**: Medium (upload modal, progress tracking)

### 3. **Chat Components**
- **Location**: `apps/web/src/features/chat/`
- **Status**: ✅ Already in `feature-chat` chunk
- **Size**: Medium (chat interface, messages, emoji picker)

### 4. **Studio Components**
- **Location**: `apps/web/src/components/studio/`
- **Status**: ✅ Already in `feature-studio` chunk
- **Size**: Large (audio editing, AI tools, file browser)

## Potential Heavy Components (Not Yet Lazy Loaded)

### 1. **@dnd-kit** (Drag and Drop)
- **Size**: Medium (~50-100KB)
- **Location**: Used in playlist reordering
- **Status**: ⚠️ Not lazy loaded
- **Recommendation**: Consider lazy loading if used in heavy features only
- **Priority**: LOW (already in vendor chunk via manual chunks config)

### 2. **dompurify**
- **Size**: Medium (~30-50KB)
- **Location**: Used for sanitizing HTML content
- **Status**: ⚠️ Not lazy loaded
- **Recommendation**: Consider lazy loading if only used in specific features
- **Priority**: LOW (used for security, may need to be available early)

### 3. **Analytics/Charts Pages**
- **Location**: `apps/web/src/pages/AnalyticsPage.tsx`
- **Status**: ⚠️ Page is lazy loaded, but chart components are not
- **Recommendation**: Charts are lightweight (custom SVG), no action needed
- **Priority**: N/A (already optimized)

## Components Using Heavy Libraries

### 1. **PlaybackDashboard**
- **Location**: `apps/web/src/features/streaming/components/PlaybackDashboard.tsx`
- **Libraries**: May use charts
- **Status**: ✅ Part of streaming feature (already chunked)
- **Recommendation**: No action needed

### 2. **TrackStatsDisplay**
- **Location**: `apps/web/src/features/tracks/components/TrackStatsDisplay.tsx`
- **Libraries**: Custom charts (lightweight)
- **Status**: ✅ Lightweight, no action needed

## Summary

### Already Optimized ✅
- ✅ All routes lazy loaded
- ✅ Heavy third-party components (EmojiPicker, ImageCropper) lazy loaded
- ✅ Vendor bundles split into separate chunks
- ✅ Feature chunks configured for player, upload, chat, studio
- ✅ Chart components are lightweight (custom SVG, no heavy libraries)

### Potential Optimizations (Low Priority)
- ⚠️ `@dnd-kit` - Could be lazy loaded if only used in specific features
- ⚠️ `dompurify` - Could be lazy loaded if only used in specific features

### Conclusion

**Most heavy components are already optimized:**
- Heavy third-party libraries are already lazy loaded (EmojiPicker, ImageCropper)
- Vendor bundles are already split
- Feature chunks are already configured
- Chart components are lightweight (no heavy chart libraries)

**No immediate action required** - The codebase already has good code splitting in place. The remaining heavy libraries (`@dnd-kit`, `dompurify`) are relatively small and may not benefit significantly from lazy loading.

## Recommendations

1. **Monitor bundle size** - Use `npm run build` and check `dist/bundle-analysis.html` regularly
2. **Consider lazy loading @dnd-kit** - Only if playlist reordering becomes a heavy feature
3. **Keep dompurify in main bundle** - Security-critical, should be available early
4. **Continue monitoring** - As new features are added, reassess heavy components