@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/utils/bundle-analyzer.js

@@ -1,260 +1,202 @@
-// 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
-            });
-          }
+    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) {
+        const lines = buildOutput.split('\n');
+        let totalSize = 0;
+        let gzippedSize = 0;
+        const chunks = [];
+        // 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
+    estimateModuleCount(bundleSizeKB) {
+        // Rough estimation: average module size is ~2KB
+        return Math.round(bundleSizeKB / 2);
+    }
+    // Estimate modules for a specific chunk
+    estimateModulesForChunk(chunkName) {
+        // 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'];
         }
-      }
-    });
-
-    // 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'];
+        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)
+    detectDuplicateModules() {
+        // This would require actual bundle analysis
+        // For now, return common duplicates
+        return ['react', 'react-dom'];
+    }
+    // Detect unused exports (simplified)
+    detectUnusedExports() {
+        // This would require actual tree-shaking analysis
+        // For now, return potential unused exports
+        return ['legacy-theme', 'deprecated-utils'];
     }
-    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;
+    // Calculate optimization score (0-100)
+    calculateOptimizationScore() {
+        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);
     }
-    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.');
+    // Get current metrics
+    getMetrics() {
+        return { ...this.metrics };
     }
-
-    if (this.metrics.chunkCount > 10) {
-      recommendations.push('Too many chunks. Consider consolidating smaller chunks.');
+    // Get performance metrics
+    getPerformanceMetrics() {
+        return { ...this.performanceMetrics };
     }
-
-    if (this.metrics.duplicateModules.length > 0) {
-      recommendations.push('Duplicate modules detected. Check for multiple versions of the same package.');
+    // Measure build time
+    measureBuildTime(startTime) {
+        this.performanceMetrics.buildTime = Date.now() - startTime;
     }
-
-    if (this.metrics.unusedExports.length > 0) {
-      recommendations.push('Unused exports detected. Enable tree-shaking and remove dead code.');
+    // Measure theme switch performance
+    measureThemeSwitch(callback) {
+        const startTime = performance.now();
+        callback();
+        const endTime = performance.now();
+        const duration = endTime - startTime;
+        this.performanceMetrics.themeSwitchTime = duration;
+        return duration;
     }
-
-    if (this.performanceMetrics.themeSwitchTime > 100) {
-      recommendations.push('Theme switching is slow. Optimize theme application logic.');
+    // Measure component render performance
+    measureComponentRender(callback) {
+        const startTime = performance.now();
+        callback();
+        const endTime = performance.now();
+        const duration = endTime - startTime;
+        this.performanceMetrics.componentRenderTime = duration;
+        return duration;
     }
-
-    if (this.performanceMetrics.componentRenderTime > 50) {
-      recommendations.push('Component rendering is slow. Consider memoization and optimization.');
+    // Get memory usage (if available)
+    getMemoryUsage() {
+        if ('memory' in performance) {
+            const memory = performance.memory;
+            this.performanceMetrics.memoryUsage = memory.usedJSHeapSize / 1024 / 1024; // MB
+            return this.performanceMetrics.memoryUsage;
+        }
+        return 0;
+    }
+    // Generate optimization recommendations
+    generateRecommendations() {
+        const recommendations = [];
+        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;
     }
-
-    if (recommendations.length === 0) {
-      recommendations.push('Bundle is well-optimized. No immediate actions required.');
+    // Export metrics for external analysis
+    exportMetrics() {
+        return JSON.stringify({
+            bundle: this.metrics,
+            performance: this.performanceMetrics,
+            recommendations: this.generateRecommendations(),
+            timestamp: new Date().toISOString()
+        }, null, 2);
     }
-
-    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();