#113 perf: optimize bundle size - main JS chunk exceeds 500KB warning

🐛 Build Warning - Large Bundle Size

During the production build, Vite is generating a warning about large JS chunks:

dist/assets/index-BwFWflJy.js   1,521.69 kB │ gzip: 417.68 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit

📊 Current Bundle Analysis

• Main JS bundle: 1,521.69 kB (417.68 kB gzipped)
• CSS bundle: 75.60 kB (12.97 kB gzipped)
• Total modules: 3,537

🎯 Optimization Goals

1. Code Splitting: Implement route-based code splitting for better performance
2. Vendor Chunking: Separate vendor libraries from application code
3. Bundle Analysis: Identify the largest dependencies contributing to bundle size
4. Performance: Improve initial page load times

🔧 Proposed Solutions

1. Dynamic Imports: Use React.lazy() and Suspense for route components
2. Manual Chunks: Configure Vite to split vendor libraries (React, UI libs, etc.)
3. Bundle Analyzer: Add bundle analysis tools to identify optimization opportunities
4. Tree Shaking: Ensure unused code is properly eliminated

🚀 Expected Outcomes

• Reduce main bundle size below 500KB warning threshold
• Improve initial page load performance
• Better caching strategy with separated vendor chunks
• Cleaner build output without warnings

📋 Technical Details

Project: React + Vite + TypeScript frontend
Build Tool: Vite 5.4.21
Current Warning Threshold: 500KB
Current Bundle Size: 1,521.69 KB (3x over threshold)

Priority: Medium - Performance optimization
Impact: User experience and build warnings

Bundle Optimization Complete ✅

Successfully implemented comprehensive bundle optimization with significant performance improvements:

Implementation Details

• Manual Chunking Strategy: Separated vendor libraries by functionality into logical chunks

  • vendor-react: React ecosystem (react, react-dom, react-router-dom)
  • vendor-ui-core: Core Radix UI components (dialog, dropdown, popover, etc.)
  • vendor-ui-forms: Form-related components (checkbox, radio, slider, react-hook-form, zod)
  • vendor-data: Data management (@tanstack/react-query, @supabase/supabase-js)
  • vendor-utils: Utility libraries (clsx, tailwind-merge, etc.)
  • Additional chunks for i18n, charts, and UI enhancements

• Route-Based Code Splitting: Implemented React.lazy for non-critical pages

  • Critical pages (Index, Login, Signup) load immediately
  • Dashboard and other protected routes load on-demand
  • Custom loading component with spinner

• Production Optimizations:

  • Terser minification with console/debugger removal
  • Custom chunk file naming for better caching
  • Bundle analyzer integration for ongoing monitoring

Performance Results

Before: Single main chunk of 1,521.69 kB (exceeded 500KB warning)

After: Multiple optimized chunks:

• vendor-react-[hash].js: 396.05 kB
• vendor-ui-core-[hash].js: 287.75 kB
  
• vendor-data-[hash].js: 184.91 kB
• vendor-ui-forms-[hash].js: 137.66 kB
• Plus smaller chunks for other functionality

Benefits

• ✅ No more build warnings about large chunks
• ✅ 74% reduction in largest chunk size (1,521.69 kB → 396.05 kB)
• ✅ Better caching: Vendor code cached separately from app code
• ✅ Faster initial load: Only critical code loaded upfront
• ✅ Progressive loading: Non-critical pages load as needed

Files Modified

• package.json: Added terser dev dependency
• vite.config.ts: Comprehensive chunking strategy and optimization settings
• src/App.tsx: Route-based code splitting with React.lazy

Commit: 145d23d

This optimization significantly improves the user experience, especially for users on slower connections, while maintaining all functionality.