senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/docs/HEAVY_COMPONENTS_AUDIT.md
senke f7072595f2 scalability: audit heavy components for code splitting 
- Created HEAVY_COMPONENTS_AUDIT.md documenting all heavy components
- Identified already lazy-loaded components: EmojiPicker, ImageCropper, Toaster
- Verified chart components are lightweight (custom SVG, no heavy libraries)
- Confirmed heavy libraries already in vendor chunks
- Documented feature chunks already configured
- Identified potential optimizations (@dnd-kit, dompurify) - low priority
- Conclusion: Most heavy components already optimized
- Action 6.2.1.3 complete
2026-01-15 20:50:51 +01:00

6.2 KiB
Raw Blame History

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