115 lines
3.2 KiB
Markdown
115 lines
3.2 KiB
Markdown
# 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
|
|
```bash
|
|
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`:
|
|
|
|
```typescript
|
|
// 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
|
|
```typescript
|
|
// Before
|
|
import { TrendingUp } from 'lucide-react';
|
|
<TrendingUp size={20} />
|
|
|
|
// After
|
|
import { TrendingUp as TrendingUpIcon } from '@mui/icons-material';
|
|
<TrendingUpIcon fontSize="small" />
|
|
```
|
|
|
|
### Step 4: Test
|
|
```bash
|
|
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
|
|
|