Performance Optimization ^1.12.0

vue-styled-components provides comprehensive performance optimization features, including style caching, batch updates, and performance monitoring to help you build high-performance applications.

Overview

Core Features

• Style Caching: Automatically cache computed styles with LRU eviction strategy
• Batch Updates: Merge multiple style updates into a single render frame
• Performance Monitoring: Real-time performance metrics and optimization suggestions
• Async Processing: Optional async style processing for complex scenarios

Performance Benefits

• Style calculation time reduced by up to 80%
• Cache hit rate improved by 50-90%
• DOM operation frequency significantly reduced
• Smoother animations and interactions for better user experience

Quick Setup

Environment-based Configuration

<script setup lang="ts">
import { configureStyleProcessing } from '@vue-styled-components/core'

// Auto-configure based on environment
function setupPerformanceOptimization() {
  if (process.env.NODE_ENV === 'development') {
    // Development: Enable monitoring, disable aggressive optimizations
    configureStyleProcessing({
      enableCache: true,
      cacheSize: 1000,
      enableBatchUpdates: true,
      batchDelay: 16,
      enablePerformanceMonitoring: true
    })
  } else if (process.env.NODE_ENV === 'production') {
    // Production: Maximize performance, disable monitoring
    configureStyleProcessing({
      enableCache: true,
      cacheSize: 2000,
      enableBatchUpdates: true,
      batchDelay: 8,
      enableAsync: true,
      enablePerformanceMonitoring: false
    })
  }
}

setupPerformanceOptimization()
</script>

Preset Configurations

You can choose preset configurations based on different scenarios to achieve optimal performance.

<script setup lang="ts">
import {
  setupDevelopmentConfiguration,
  setupProductionConfiguration,
  setupHighPerformanceConfiguration,
  setupMemoryOptimizedConfiguration
} from 'your-preset-part'

// Choose the configuration that best fits your needs
function configureForScenario(scenario: string) {
  switch (scenario) {
    case 'development':
      setupDevelopmentConfiguration()
      break
    case 'production':
      setupProductionConfiguration()
      break
    case 'high-performance':
      setupHighPerformanceConfiguration()
      break
    case 'memory-optimized':
      setupMemoryOptimizedConfiguration()
      break
  }
}

// Example: Configure for high-performance scenario
configureForScenario('high-performance')
</script>

<template>
  <div>Scenario-based configuration applied!</div>
</template>

Practical Examples

Dynamic Theme Switching with Performance Monitoring

Advanced Optimizations

Cache Prewarming

import { CacheManager } from '@vue-styled-components/core/examples'

// Prewarm cache with common styles at application startup
function prewarmStyleCache() {
  const commonStyles = [
    {
      expressions: ['color: #333;', 'font-size: 16px;'],
      context: { theme: { primary: 'blue' } }
    },
    {
      expressions: ['padding: 8px 16px;', 'border-radius: 4px;'],
      context: { theme: { primary: 'blue' } }
    }
  ]
  
  CacheManager.warmupCache(commonStyles)
}

// Call during application initialization
prewarmStyleCache()

Adaptive Performance Tuning

import { configureStyleProcessing, performanceMonitor } from '@vue-styled-components/core'

// Automatically adjust configuration based on performance metrics
function adaptivePerformanceTuning() {
  setInterval(() => {
    const metrics = performanceMonitor.getMetrics()
    
    if (metrics.cacheHitRate < 0.7) {
      // Low cache hit rate - increase cache size
      configureStyleProcessing({
        cacheSize: Math.min(5000, getCurrentCacheSize() * 1.5)
      })
    }
    
    if (metrics.averageCalculationTime > 10) {
      // Slow calculation - enable async processing
      configureStyleProcessing({
        enableAsync: true,
        batchDelay: Math.max(4, getCurrentBatchDelay() * 0.8)
      })
    }
  }, 30000) // Check every 30 seconds
}

Memory Management

import { styleCache, performanceMonitor } from '@vue-styled-components/core'

// Implement memory-aware cache management
function memoryAwareCacheManagement() {
  // Monitor memory usage (if available)
  if ('memory' in performance) {
    setInterval(() => {
      const memoryInfo = (performance as any).memory
      const usedMemory = memoryInfo.usedJSHeapSize / memoryInfo.totalJSHeapSize
      
      if (usedMemory > 0.8) {
        // High memory usage - clear cache
        styleCache.clear()
        console.warn('High memory usage detected, cache cleared')
      }
    }, 60000) // Check every minute
  }
}

Performance Best Practices

1. Optimize Style Expressions

// ✅ Good: Stable style expressions
const StyledButton = styled.button`
  color: ${props => props.theme.primary};
  padding: ${props => props.size === 'large' ? '12px 24px' : '8px 16px'};
`

// ❌ Avoid: Frequently changing unstable expressions
const StyledButton = styled.button`
  color: ${props => Math.random() > 0.5 ? 'red' : 'blue'};
  transform: rotate(${Math.random() * 360}deg);
`

2. Regular Performance Monitoring

// Set up performance monitoring in development environment
if (process.env.NODE_ENV === 'development') {
  setInterval(() => {
    const metrics = performanceMonitor.getMetrics()
    
    if (metrics.cacheHitRate < 0.6) {
      console.warn('Low cache hit rate:', metrics.cacheHitRate)
    }
    
    if (metrics.averageCalculationTime > 15) {
      console.warn('Slow style calculation:', metrics.averageCalculationTime)
    }
  }, 10000)
}

Troubleshooting

Common Performance Issues

1. Low Cache Hit Rate

   • Cause: Too many dynamic or unstable style expressions
   • Solution: Use stable theme objects, avoid random values in styles

2. High Memory Usage

   • Cause: Cache size too large or memory leaks
   • Solution: Reduce cache size or implement periodic cache cleanup

3. Slow Style Updates

   • Cause: Synchronous processing of complex styles
   • Solution: Enable async processing and optimize batch delay

Debugging Tools

// Enable debug mode for detailed logging
configureStyleProcessing({
  enablePerformanceMonitoring: true
})

// Export performance data for analysis
function exportPerformanceData() {
  const data = {
    timestamp: Date.now(),
    metrics: performanceMonitor.getMetrics(),
    cacheStats: styleCache.getStats(),
    recommendations: performanceMonitor.getRecommendations()
  }
  
  console.log('Performance data:', JSON.stringify(data, null, 2))
  return data
}

Optimization Tips

• Start with default settings and optimize gradually based on your specific use case
• Monitor performance metrics regularly during development
• Use preset configurations for common scenarios
• Consider memory constraints when setting cache size