193 lines
No EOL
4.8 KiB
Markdown
193 lines
No EOL
4.8 KiB
Markdown
# Frontend Performance Optimization Guide
|
|
|
|
## Quick Performance Solutions
|
|
|
|
### 1. For Immediate Speed Improvement (Recommended)
|
|
|
|
**Build and run the production version:**
|
|
```bash
|
|
npm run performance
|
|
```
|
|
This builds the optimized production version and runs it on port 3001, which will be significantly faster than the development server.
|
|
|
|
### 2. For Development Speed
|
|
|
|
**Use the fast development mode:**
|
|
```bash
|
|
npm run dev:fast
|
|
```
|
|
This runs the development server with optimized settings on port 3001.
|
|
|
|
## Port Configuration
|
|
|
|
- **Backend API**: Port 3000 (default)
|
|
- **Frontend Development**: Port 3000 (default) or 3001 (fast mode)
|
|
- **Frontend Production**: Port 3001
|
|
|
|
## Performance Strategies
|
|
|
|
### Development vs Production Performance
|
|
|
|
| Mode | Speed | Port | Features | Use Case |
|
|
|------|-------|------|----------|----------|
|
|
| `npm run dev` | Slow | 3000 | Hot reload, debugging | Development |
|
|
| `npm run dev:fast` | Medium | 3001 | Hot reload, optimized | Development |
|
|
| `npm run performance` | Fast | 3001 | Optimized, no hot reload | Testing/Production |
|
|
|
|
### Why Development Mode is Slower
|
|
|
|
Development mode includes:
|
|
- Hot module replacement (HMR)
|
|
- Source maps
|
|
- Unminified code
|
|
- Development warnings
|
|
- Type checking
|
|
- ESLint checking
|
|
|
|
### Production Mode Benefits
|
|
|
|
Production mode provides:
|
|
- Minified and optimized code
|
|
- Tree shaking
|
|
- Code splitting
|
|
- Optimized images
|
|
- Faster rendering
|
|
- Smaller bundle sizes
|
|
|
|
## Performance Optimization Techniques
|
|
|
|
### 1. Code Splitting
|
|
|
|
The Next.js config now includes automatic code splitting:
|
|
- Vendor chunks are separated
|
|
- Dynamic imports for large components
|
|
- Route-based splitting
|
|
|
|
### 2. Bundle Optimization
|
|
|
|
- **SWC Minification**: Faster than Terser
|
|
- **Package Optimization**: Optimized imports for UI libraries
|
|
- **Tree Shaking**: Removes unused code
|
|
|
|
### 3. Image Optimization
|
|
|
|
- **WebP/AVIF formats**: Smaller file sizes
|
|
- **Responsive images**: Automatic sizing
|
|
- **Lazy loading**: Images load when needed
|
|
|
|
### 4. Caching Strategies
|
|
|
|
- **Static generation**: Pre-built pages
|
|
- **Incremental Static Regeneration**: Fresh content with caching
|
|
- **CDN optimization**: Distributed content delivery
|
|
|
|
## Performance Monitoring
|
|
|
|
### Analyze Bundle Size
|
|
|
|
```bash
|
|
npm run build:analyze
|
|
```
|
|
|
|
This will show you:
|
|
- Bundle size breakdown
|
|
- Largest dependencies
|
|
- Optimization opportunities
|
|
|
|
### Type Checking
|
|
|
|
```bash
|
|
npm run type-check
|
|
```
|
|
|
|
Ensures TypeScript types are correct without running the full dev server.
|
|
|
|
## Advanced Optimizations
|
|
|
|
### 1. Component-Level Optimizations
|
|
|
|
```tsx
|
|
// Use React.memo for expensive components
|
|
const ExpensiveComponent = React.memo(({ data }) => {
|
|
return <div>{/* expensive rendering */}</div>
|
|
});
|
|
|
|
// Use useMemo for expensive calculations
|
|
const expensiveValue = useMemo(() => {
|
|
return expensiveCalculation(data);
|
|
}, [data]);
|
|
|
|
// Use useCallback for event handlers
|
|
const handleClick = useCallback(() => {
|
|
// handle click
|
|
}, []);
|
|
```
|
|
|
|
### 2. Lazy Loading
|
|
|
|
```tsx
|
|
// Lazy load components
|
|
const LazyComponent = dynamic(() => import('./LazyComponent'), {
|
|
loading: () => <div>Loading...</div>
|
|
});
|
|
```
|
|
|
|
### 3. Virtual Scrolling
|
|
|
|
For large lists, consider virtual scrolling libraries:
|
|
- `react-window`
|
|
- `react-virtualized`
|
|
|
|
## Environment-Specific Optimizations
|
|
|
|
### Development Environment
|
|
|
|
1. **Use Turbopack**: Already enabled in your config
|
|
2. **Disable unnecessary features**: Remove console logs in production
|
|
3. **Optimize imports**: Use the `optimizePackageImports` config
|
|
|
|
### Production Environment
|
|
|
|
1. **Enable compression**: Gzip/Brotli compression
|
|
2. **Use CDN**: Serve static assets from CDN
|
|
3. **Enable caching**: Browser and server-side caching
|
|
4. **Monitor performance**: Use tools like Lighthouse
|
|
|
|
## Troubleshooting Slow Performance
|
|
|
|
### Common Issues
|
|
|
|
1. **Large bundle size**: Use bundle analyzer
|
|
2. **Unnecessary re-renders**: Use React DevTools Profiler
|
|
3. **Slow API calls**: Implement caching and loading states
|
|
4. **Heavy third-party libraries**: Consider alternatives or lazy loading
|
|
|
|
### Performance Checklist
|
|
|
|
- [ ] Use production build for testing
|
|
- [ ] Implement code splitting
|
|
- [ ] Optimize images
|
|
- [ ] Minimize bundle size
|
|
- [ ] Use React.memo where appropriate
|
|
- [ ] Implement proper caching
|
|
- [ ] Monitor Core Web Vitals
|
|
|
|
## Recommended Workflow
|
|
|
|
1. **Development**: Use `npm run dev:fast` for faster development
|
|
2. **Testing**: Use `npm run performance` to test production-like performance
|
|
3. **Production**: Use `npm run build && npm run start` for deployment
|
|
|
|
## Performance Metrics to Monitor
|
|
|
|
- **First Contentful Paint (FCP)**: < 1.8s
|
|
- **Largest Contentful Paint (LCP)**: < 2.5s
|
|
- **First Input Delay (FID)**: < 100ms
|
|
- **Cumulative Layout Shift (CLS)**: < 0.1
|
|
|
|
## Tools for Performance Analysis
|
|
|
|
- **Lighthouse**: Built into Chrome DevTools
|
|
- **WebPageTest**: Detailed performance analysis
|
|
- **React DevTools Profiler**: Component-level performance
|
|
- **Bundle Analyzer**: Bundle size analysis |