@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/utils/bundle-analyzer.js

@@ -0,0 +1,242 @@
+// Bundle analysis and optimization utilities
+export interface BundleMetrics {
+  totalSize;
+  gzippedSize;
+  moduleCount;
+  chunkCount;
+  largestChunks;
+    size;
+    gzippedSize;
+    modules];
+  }>;
+  duplicateModules];
+  unusedExports];
+  optimizationScore;
+}
+
+export interface PerformanceMetrics {
+  buildTime;
+  themeSwitchTime;
+  componentRenderTime;
+  memoryUsage;
+  bundleLoadTime;
+}
+
+export class BundleAnalyzer {
+  private metrics;
+  private performanceMetrics;
+
+  constructor() {
+    this.metrics = {
+      totalSize,
+      gzippedSize,
+      moduleCount,
+      chunkCount,
+      largestChunks],
+      duplicateModules],
+      unusedExports],
+      optimizationScore};
+
+    this.performanceMetrics = {
+      buildTime,
+      themeSwitchTime,
+      componentRenderTime,
+      memoryUsage,
+      bundleLoadTime};
+  }
+
+  // Analyze bundle size from build output
+  analyzeBundleSize(buildOutput)= buildOutput.split('\n');
+    let totalSize = 0;
+    let gzippedSize = 0;
+    const chunks; size; gzippedSize}> = [];
+
+    // 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+kB/);
+        if (match) {
+          const [, name, ext, size, gzip] = match;
+          const sizeKB = parseFloat(size);
+          const gzipKB = parseFloat(gzip);
+          
+          totalSize += sizeKB;
+          gzippedSize += gzipKB;
+          
+          chunks.push({
+            name}.${ext}`,
+            size,
+            gzippedSize});
+        } else {
+          // Fallback= 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,
+              size,
+              gzippedSize});
+          }
+        }
+      }
+    });
+
+    // Sort chunks by size
+    chunks.sort((a, b) => b.size - a.size);
+
+    this.metrics = {
+      totalSize,
+      gzippedSize,
+      moduleCount),
+      chunkCount,
+      largestChunks, 5).map(chunk => ({
+        ...chunk,
+        modules)
+      })),
+      duplicateModules),
+      unusedExports),
+      optimizationScore)
+    };
+
+    return this.metrics;
+  }
+
+  // Estimate module count based on bundle size
+  private estimateModuleCount(bundleSizeKB));
+  }
+
+  // Estimate modules for a specific chunk
+  private 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'];
+    } 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()] {
+    // This would require actual bundle analysis
+    // For now, return common duplicates
+    return ['react', 'react-dom'];
+  }
+
+  // Detect unused exports (simplified)
+  private detectUnusedExports()] {
+    // 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()= 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()};
+  }
+
+  // Get performance metrics
+  getPerformanceMetrics()};
+  }
+
+  // Measure build time
+  measureBuildTime(startTime)= Date.now() - startTime;
+  }
+
+  // Measure theme switch performance
+  measureThemeSwitch(callback) => void)= performance.now();
+    callback();
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+    this.performanceMetrics.themeSwitchTime = duration;
+    return duration;
+  }
+
+  // Measure component render performance
+  measureComponentRender(callback) => void)= performance.now();
+    callback();
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+    this.performanceMetrics.componentRenderTime = duration;
+    return duration;
+  }
+
+  // Get memory usage (if available)
+  getMemoryUsage()) {
+      const memory = (performance as any).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;
+  }
+
+  // Export metrics for external analysis
+  exportMetrics(),
+      performance,
+      recommendations),
+      timestamp).toISOString()
+    }, null, 2);
+  }
+}
+
+// Create and export default instance
+export const bundleAnalyzer = new BundleAnalyzer();