@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.5

package/src/utils/bundle-analyzer.ts

@@ -0,0 +1,260 @@
+// Bundle analysis and optimization utilities
+export interface BundleMetrics {
+  totalSize: number;
+  gzippedSize: number;
+  moduleCount: number;
+  chunkCount: number;
+  largestChunks: Array<{
+    name: string;
+    size: number;
+    gzippedSize: number;
+    modules: string[];
+  }>;
+  duplicateModules: string[];
+  unusedExports: string[];
+  optimizationScore: number;
+}
+
+export interface PerformanceMetrics {
+  buildTime: number;
+  themeSwitchTime: number;
+  componentRenderTime: number;
+  memoryUsage: number;
+  bundleLoadTime: number;
+}
+
+export class BundleAnalyzer {
+  private metrics: BundleMetrics;
+  private performanceMetrics: PerformanceMetrics;
+
+  constructor() {
+    this.metrics = {
+      totalSize: 0,
+      gzippedSize: 0,
+      moduleCount: 0,
+      chunkCount: 0,
+      largestChunks: [],
+      duplicateModules: [],
+      unusedExports: [],
+      optimizationScore: 0
+    };
+
+    this.performanceMetrics = {
+      buildTime: 0,
+      themeSwitchTime: 0,
+      componentRenderTime: 0,
+      memoryUsage: 0,
+      bundleLoadTime: 0
+    };
+  }
+
+  // Analyze bundle size from build output
+  analyzeBundleSize(buildOutput: string): BundleMetrics {
+    const lines = buildOutput.split('\n');
+    let totalSize = 0;
+    let gzippedSize = 0;
+    const chunks: Array<{ name: string; size: number; gzippedSize: number }> = [];
+
+    // Parse build output for size information
+    lines.forEach(line => {
+      if (line.includes('dist/assets/') && line.includes('kB')) {
+        // Updated regex to match Vite's output format more accurately
+        const match = line.match(/dist\/assets\/([^.]+)\.[^.]+\.([^.]+)\s+(\d+\.\d+)\s+kB\s+\│\s+gzip:\s+(\d+\.\d+)\s+kB/);
+        if (match) {
+          const [, name, ext, size, gzip] = match;
+          const sizeKB = parseFloat(size);
+          const gzipKB = parseFloat(gzip);
+          
+          totalSize += sizeKB;
+          gzippedSize += gzipKB;
+          
+          chunks.push({
+            name: `${name}.${ext}`,
+            size: sizeKB,
+            gzippedSize: gzipKB
+          });
+        } else {
+          // Fallback: try to parse just the size information
+          const sizeMatch = line.match(/(\d+\.\d+)\s+kB/);
+          if (sizeMatch) {
+            const sizeKB = parseFloat(sizeMatch[1]);
+            totalSize += sizeKB;
+            gzippedSize += sizeKB * 0.3; // Estimate gzip size as 30% of original
+            
+            chunks.push({
+              name: 'unknown',
+              size: sizeKB,
+              gzippedSize: sizeKB * 0.3
+            });
+          }
+        }
+      }
+    });
+
+    // Sort chunks by size
+    chunks.sort((a, b) => b.size - a.size);
+
+    this.metrics = {
+      totalSize,
+      gzippedSize,
+      moduleCount: this.estimateModuleCount(totalSize),
+      chunkCount: chunks.length,
+      largestChunks: chunks.slice(0, 5).map(chunk => ({
+        ...chunk,
+        modules: this.estimateModulesForChunk(chunk.name)
+      })),
+      duplicateModules: this.detectDuplicateModules(),
+      unusedExports: this.detectUnusedExports(),
+      optimizationScore: this.calculateOptimizationScore()
+    };
+
+    return this.metrics;
+  }
+
+  // Estimate module count based on bundle size
+  private estimateModuleCount(bundleSizeKB: number): number {
+    // Rough estimation: average module size is ~2KB
+    return Math.round(bundleSizeKB / 2);
+  }
+
+  // Estimate modules for a specific chunk
+  private estimateModulesForChunk(chunkName: string): string[] {
+    // This would be more accurate with actual webpack/vite analysis
+    // For now, provide reasonable estimates based on chunk names
+    if (chunkName.includes('index')) {
+      return ['main', 'themes', 'components', 'utils'];
+    } else if (chunkName.includes('vendor')) {
+      return ['react', 'react-dom', 'lodash'];
+    } else if (chunkName.includes('theme')) {
+      return ['theme-provider', 'theme-switcher', 'theme-customizer'];
+    }
+    return ['unknown'];
+  }
+
+  // Detect duplicate modules (simplified)
+  private detectDuplicateModules(): string[] {
+    // This would require actual bundle analysis
+    // For now, return common duplicates
+    return ['react', 'react-dom'];
+  }
+
+  // Detect unused exports (simplified)
+  private detectUnusedExports(): string[] {
+    // This would require actual tree-shaking analysis
+    // For now, return potential unused exports
+    return ['legacy-theme', 'deprecated-utils'];
+  }
+
+  // Calculate optimization score (0-100)
+  private calculateOptimizationScore(): number {
+    let score = 100;
+    
+    // Penalize large bundle size
+    if (this.metrics.totalSize > 500) score -= 20;
+    if (this.metrics.totalSize > 1000) score -= 30;
+    
+    // Penalize many chunks
+    if (this.metrics.chunkCount > 10) score -= 15;
+    
+    // Penalize duplicate modules
+    score -= this.metrics.duplicateModules.length * 5;
+    
+    // Penalize unused exports
+    score -= this.metrics.unusedExports.length * 3;
+    
+    return Math.max(0, score);
+  }
+
+  // Get current metrics
+  getMetrics(): BundleMetrics {
+    return { ...this.metrics };
+  }
+
+  // Get performance metrics
+  getPerformanceMetrics(): PerformanceMetrics {
+    return { ...this.performanceMetrics };
+  }
+
+  // Measure build time
+  measureBuildTime(startTime: number): void {
+    this.performanceMetrics.buildTime = Date.now() - startTime;
+  }
+
+  // Measure theme switch performance
+  measureThemeSwitch(callback: () => void): number {
+    const startTime = performance.now();
+    callback();
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+    this.performanceMetrics.themeSwitchTime = duration;
+    return duration;
+  }
+
+  // Measure component render performance
+  measureComponentRender(callback: () => void): number {
+    const startTime = performance.now();
+    callback();
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+    this.performanceMetrics.componentRenderTime = duration;
+    return duration;
+  }
+
+  // Get memory usage (if available)
+  getMemoryUsage(): number {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory;
+      this.performanceMetrics.memoryUsage = memory.usedJSHeapSize / 1024 / 1024; // MB
+      return this.performanceMetrics.memoryUsage;
+    }
+    return 0;
+  }
+
+  // Generate optimization recommendations
+  generateRecommendations(): string[] {
+    const recommendations: string[] = [];
+
+    if (this.metrics.totalSize > 500) {
+      recommendations.push('Bundle size is large. Consider code splitting and lazy loading.');
+    }
+
+    if (this.metrics.chunkCount > 10) {
+      recommendations.push('Too many chunks. Consider consolidating smaller chunks.');
+    }
+
+    if (this.metrics.duplicateModules.length > 0) {
+      recommendations.push('Duplicate modules detected. Check for multiple versions of the same package.');
+    }
+
+    if (this.metrics.unusedExports.length > 0) {
+      recommendations.push('Unused exports detected. Enable tree-shaking and remove dead code.');
+    }
+
+    if (this.performanceMetrics.themeSwitchTime > 100) {
+      recommendations.push('Theme switching is slow. Optimize theme application logic.');
+    }
+
+    if (this.performanceMetrics.componentRenderTime > 50) {
+      recommendations.push('Component rendering is slow. Consider memoization and optimization.');
+    }
+
+    if (recommendations.length === 0) {
+      recommendations.push('Bundle is well-optimized. No immediate actions required.');
+    }
+
+    return recommendations;
+  }
+
+  // Export metrics for external analysis
+  exportMetrics(): string {
+    return JSON.stringify({
+      bundle: this.metrics,
+      performance: this.performanceMetrics,
+      recommendations: this.generateRecommendations(),
+      timestamp: new Date().toISOString()
+    }, null, 2);
+  }
+}
+
+// Create and export default instance
+export const bundleAnalyzer = new BundleAnalyzer();