ALwrity/frontend/UNUSED_JAVASCRIPT_OPTIMIZATION.md

Unused JavaScript Optimization Guide

Current Issue

Lighthouse reports 980 KiB of unused JavaScript. This guide helps identify and fix it.

Strategy

1. Bundle Analysis

First, analyze what's taking up space:

cd frontend
npm install  # Install source-map-explorer if needed
npm run analyze

This creates bundle-report.html - open it in a browser to see:

• Which packages are largest
• Which files import them
• Unused code within packages

2. Lazy Load Heavy Dependencies

A. Recharts (Charts Library)

Size: ~200+ KiB
Usage: Only in billing, analytics, and scheduler dashboards

Before:

import { LineChart, Line } from 'recharts';

After:

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

<Suspense fallback={<ChartSkeleton />}>
  <LazyLineChart>
    <Line />
  </LazyLineChart>
</Suspense>

Files to update:

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

B. Wix SDK

Size: ~100+ KiB
Usage: Only in WixTestPage and WixCallbackPage

Before:

import { createClient } from '@wix/sdk';

After:

const { createClient } = await import('@wix/sdk');
// Or use lazy loading in component

Files to update:

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

C. Framer Motion (Animations)

Size: ~246 KiB
Usage: Used extensively but can be optimized

Strategy:

1. Use CSS animations for simple transitions
2. Lazy load framer-motion for non-critical animations
3. Use will-change CSS property instead of complex animations

Example:

// Instead of complex framer-motion for simple fade
// Use CSS:
const fadeIn = {
  animation: 'fadeIn 0.3s ease-in'
};

3. Tree Shaking Optimization

A. Material-UI Icons

Issue: Importing entire icon set

Before:

import { TrendingUp, TrendingDown } from '@mui/icons-material';

After (already optimized, but verify):

// React Scripts should tree-shake automatically
// But verify imports are specific

B. Lucide React Icons

Issue: Large icon library, some can be replaced with MUI icons

Strategy: Replace lucide-react icons with MUI icons where possible

Before:

import { TrendingUp } from 'lucide-react';

After:

import { TrendingUp } from '@mui/icons-material';

4. Remove Unused Dependencies

Check if these are actually used:

• @wix/blog - Only in WixTestPage
• lucide-react - Can be replaced with MUI icons in many places
• zod - Verify if all schemas are used

5. Code Splitting Improvements

A. Route-Level Splitting (Already Done ✅)

Routes are already lazy-loaded.

B. Component-Level Splitting

Lazy load heavy components within routes:

// In MainDashboard.tsx
const EnhancedBillingDashboard = lazy(() => 
  import('../billing/EnhancedBillingDashboard')
);

6. Dynamic Imports for Heavy Features

A. Charts

Only load charts when dashboard is viewed:

const loadCharts = () => import('recharts');

B. Analytics

Only load analytics when analytics tab is opened:

const loadAnalytics = () => import('./components/AnalyticsInsights');

Implementation Steps

Step 1: Analyze Bundle

npm run analyze
# Open bundle-report.html

Step 2: Identify Large Dependencies

Look for:

• Packages > 50 KiB
• Packages used in < 3 places
• Packages that can be lazy-loaded

Step 3: Lazy Load Heavy Dependencies

1. Create lazy wrappers (see lazyRecharts.tsx)
2. Update imports to use lazy versions
3. Add Suspense boundaries

Step 4: Replace Icons

1. Find lucide-react imports
2. Replace with MUI icons where possible
3. Remove lucide-react if not needed

Step 5: Test

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

Expected Results

Before

• Unused JavaScript: 980 KiB
• Bundle size: Large initial load

After

• Unused JavaScript: < 200 KiB (estimated)
• Bundle size: Reduced by ~500-700 KiB
• Performance: Improved initial load time

Files to Update

High Priority (Large Impact)

1. ✅ frontend/src/utils/lazyRecharts.tsx - Created
2. ✅ frontend/src/utils/lazyWix.ts - Created
3. frontend/src/components/billing/UsageTrends.tsx - Use lazy recharts
4. frontend/src/components/SchedulerDashboard/SchedulerCharts.tsx - Use lazy recharts
5. frontend/src/components/WixTestPage/WixTestPage.tsx - Use lazy Wix SDK

Medium Priority

6. frontend/src/components/ContentPlanningDashboard/components/MonitoringCharts.tsx
7. frontend/src/components/shared/charts/AdvancedChartComponents.tsx
8. Replace lucide-react with MUI icons in billing components

Low Priority (Optimization)

9. Optimize framer-motion usage
10. Further code splitting within components

Monitoring

After changes, verify:

1. Bundle size decreased
2. Lighthouse "Reduce unused JavaScript" improved
3. No broken functionality
4. Charts still work (with loading states)

Next Steps

1. Run npm run analyze to see current bundle
2. Update components to use lazy-loaded dependencies
3. Test functionality
4. Re-run Lighthouse audit