Full-Stack Project Development

Chapter 12: Performance Optimization

12.1 Optimization Techniques

Performance optimization improves user experience and reduces server costs.

Frontend Optimization:

• Code splitting and lazy loading
• Image optimization and lazy loading
• Minification and compression
• CDN for static assets
• Service workers for caching

// React code splitting
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Image optimization
<img
    src={imageSrc}
    loading="lazy"
    alt="Description"
    srcSet={`${imageSrc} 1x, ${imageSrc2x} 2x`}
/>

Backend Optimization:

• Database query optimization
• Caching frequently accessed data
• Connection pooling
• Compression middleware
• Load balancing

// Compression
const compression = require('compression');
app.use(compression());

// Caching
const cache = require('memory-cache');
function getCachedData(key) {
    let data = cache.get(key);
    if (!data) {
        data = fetchFromDatabase(key);
        cache.put(key, data, 60000); // Cache for 1 minute
    }
    return data;
}

12.2 Database Query Optimization

// Use indexes
CREATE INDEX idx_user_email ON users(email);

// Avoid N+1 queries
// Bad
const users = await User.findAll();
for (const user of users) {
    const posts = await Post.findAll({ where: { userId: user.id } });
}

// Good - Use joins
const users = await User.findAll({
    include: [{ model: Post }]
});