Overview

This is the main tracking issue for implementing the bundle optimization strategies outlined in #355. Our goal is to reduce the react-vendor bundle from 1.3MB to under 500KB through systematic optimizations.

Current State

• React vendor bundle: 1.3MB
• Major contributors:
  • 30 Radix UI components
  • Dual charting libraries (Recharts + Nivo)
  • Dual icon libraries (react-icons + lucide-react)
  • React 18.3.1 core

Target State

• Target bundle size: <500KB initial load
• Maintain: All current functionality
• Improve: Lighthouse performance scores

Implementation Phases

Phase 1: Analysis & Quick Wins (Week 1)

Must be completed first:

• 📊 Bundle Analysis: Identify exact component sizes and dependencies #357 - Bundle analysis and dependency audit

Can be done in parallel after analysis:

• 🎨 Icon Consolidation: Replace dual icon libraries with SVG sprites (370KB savings) #358 - Icon consolidation to SVG sprites
• Remove unused dependencies

Phase 2: Major Library Optimizations (Weeks 2-3)

Can be done independently:

• 📈 Chart Library Migration: Replace Recharts + Nivo with uPlot (550KB savings) #359 - Replace dual charting libraries with uPlot
• ⚡ Safe Vite Build Optimizations: 50-100KB savings without risking stability #361 - Implement Vite build optimizations

Phase 3: Code Splitting (Weeks 3-4)

Can be done independently:

• 🚀 Route-Based Code Splitting: Reduce initial load by 400-650KB #360 - Implement route-based code splitting
• Component-level lazy loading (included in 🚀 Route-Based Code Splitting: Reduce initial load by 400-650KB #360)

Phase 4: Component Optimization (Week 5+)

Depends on Phase 1 analysis:

• 🎭 Radix UI Optimization: Tree-shake and replace simple components (100-150KB savings) #362 - Radix UI tree-shaking and optimization
• Replace simple Radix components with Floating UI (included in 🎭 Radix UI Optimization: Tree-shake and replace simple components (100-150KB savings) #362)

Expected Outcomes

*Initial load reduction

Implementation Order

Can be done in parallel (after #357):

• 🎨 Icon Consolidation: Replace dual icon libraries with SVG sprites (370KB savings) #358 - Icon consolidation
• 📈 Chart Library Migration: Replace Recharts + Nivo with uPlot (550KB savings) #359 - Chart library migration
• 🚀 Route-Based Code Splitting: Reduce initial load by 400-650KB #360 - Route-based code splitting
• ⚡ Safe Vite Build Optimizations: 50-100KB savings without risking stability #361 - Vite build optimization

Must wait for #357 completion:

• 🎭 Radix UI Optimization: Tree-shake and replace simple components (100-150KB savings) #362 - Radix UI optimization (needs bundle analysis data)

Success Criteria

• React vendor bundle reduced to <500KB
• No runtime errors from missing dependencies
• All existing functionality maintained
• Lighthouse performance score improved by 10+ points

References

• Original research issue: Research: Reduce React vendor bundle size (1.3MB) - explore smaller alternatives and Preact compatibility #355
• Performance docs: /docs/performance/BUNDLE_OPTIMIZATION_2025.md
• Performance checklist: /docs/performance/PERFORMANCE_CHECKLIST.md

Notes

• Preact migration considered but deferred due to Radix UI compatibility issues
• Custom component implementation has low ROI for this project
• Focus on proven, low-risk optimizations first
• Issues 🎨 Icon Consolidation: Replace dual icon libraries with SVG sprites (370KB savings) #358, 📈 Chart Library Migration: Replace Recharts + Nivo with uPlot (550KB savings) #359, 🚀 Route-Based Code Splitting: Reduce initial load by 400-650KB #360, and ⚡ Safe Vite Build Optimizations: 50-100KB savings without risking stability #361 can be worked on independently and in parallel
• Issue 🎭 Radix UI Optimization: Tree-shake and replace simple components (100-150KB savings) #362 is blocked until 📊 Bundle Analysis: Identify exact component sizes and dependencies #357 provides bundle analysis data