ALwrity/frontend/OPTIMIZATION_PROGRESS.md

Unused JavaScript Optimization - Progress Tracker

✅ Completed

1. Bundle Analysis Setup

   • Added source-map-explorer to devDependencies
   • Added npm run analyze script
   • Created analysis guide

2. Lazy Loading Infrastructure

   • ✅ Created frontend/src/utils/lazyRecharts.tsx - Lazy load recharts
   • ✅ Created frontend/src/utils/lazyWix.ts - Lazy load Wix SDK
   • ✅ Updated frontend/src/components/billing/UsageTrends.tsx:
     • Replaced direct recharts imports with lazy versions
     • Replaced lucide-react icons with MUI icons
     • Added Suspense boundaries

📋 Remaining Tasks

High Priority (Large Impact)

1. Update Other Chart Components

   • frontend/src/components/SchedulerDashboard/SchedulerCharts.tsx
   • frontend/src/components/ContentPlanningDashboard/components/MonitoringCharts.tsx
   • frontend/src/components/shared/charts/AdvancedChartComponents.tsx

2. Lazy Load Wix SDK

   • frontend/src/components/WixTestPage/WixTestPage.tsx
   • frontend/src/components/WixCallbackPage/WixCallbackPage.tsx
   • frontend/src/components/OnboardingWizard/common/usePlatformConnections.ts

Medium Priority

3. Replace Lucide Icons with MUI Icons

   • frontend/src/components/billing/EnhancedBillingDashboard.tsx
   • frontend/src/components/billing/CompactBillingDashboard.tsx
   • frontend/src/components/billing/BillingOverview.tsx
   • Other billing components using lucide-react

4. Optimize Framer Motion

   • Review usage and replace simple animations with CSS
   • Lazy load for non-critical animations

Low Priority

5. Further Code Splitting
   • Lazy load heavy components within routes
   • Split large components into smaller chunks

🎯 How to Continue

Step 1: Run Bundle Analysis

cd frontend
npm install  # Install source-map-explorer
npm run analyze
# Open bundle-report.html to see current state

Step 2: Update Chart Components

Follow the pattern in UsageTrends.tsx:

// Before
import { LineChart, Line } from 'recharts';

// After
import { LazyLineChart, Line, ChartLoadingFallback } from '../../utils/lazyRecharts';
import { Suspense } from 'react';

<Suspense fallback={<ChartLoadingFallback />}>
  <LazyLineChart data={data}>
    <Line />
  </LazyLineChart>
</Suspense>

Step 3: Replace Icons

// Before
import { TrendingUp } from 'lucide-react';
<TrendingUp size={20} />

// After
import { TrendingUp as TrendingUpIcon } from '@mui/icons-material';
<TrendingUpIcon fontSize="small" />

Step 4: Test

npm run build
npm run analyze  # Check if bundle size decreased

📊 Expected Results

Current

• Unused JavaScript: 980 KiB
• Recharts: ~200 KiB (loaded on every page)
• Wix SDK: ~100 KiB (loaded on every page)

After All Optimizations

• Unused JavaScript: < 200 KiB (estimated)
• Recharts: Only loaded when charts are viewed
• Wix SDK: Only loaded on Wix-related pages
• Performance: 33 → 50-60+ (estimated)

📝 Notes

• Lazy loading adds a small delay when components first load
• Use Suspense boundaries with loading states
• Test all functionality after changes
• Monitor bundle size after each change