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

package/src/utils/bundle-splitting.ts

@@ -0,0 +1,483 @@
+// Bundle splitting utilities for optimizing build process and loading performance
+export interface BundleSplitConfig {
+  enabled: boolean;
+  strategy: 'dynamic' | 'static' | 'hybrid';
+  chunkSize: number;
+  maxChunks: number;
+  minChunkSize: number;
+  vendorChunk: boolean;
+  commonChunk: boolean;
+  asyncChunk: boolean;
+  preloadChunks: boolean;
+  cacheGroups: Record<string, any>;
+}
+
+export interface ChunkAnalysis {
+  name: string;
+  size: number;
+  gzippedSize: number;
+  modules: string[];
+  dependencies: string[];
+  async: boolean;
+  vendor: boolean;
+  common: boolean;
+  loadPriority: 'high' | 'medium' | 'low';
+}
+
+export interface BundleSplitReport {
+  chunks: ChunkAnalysis[];
+  totalSize: number;
+  totalGzippedSize: number;
+  chunkCount: number;
+  averageChunkSize: number;
+  optimizationScore: number;
+  recommendations: string[];
+  timestamp: number;
+}
+
+export class BundleSplitter {
+  private config: BundleSplitConfig;
+  private chunks: Map<string, ChunkAnalysis>;
+
+  constructor(config: BundleSplitConfig = {
+    enabled: true,
+    strategy: 'hybrid',
+    chunkSize: 244 * 1024, // 244KB
+    maxChunks: 10,
+    minChunkSize: 30 * 1024, // 30KB
+    vendorChunk: true,
+    commonChunk: true,
+    asyncChunk: true,
+    preloadChunks: true,
+    cacheGroups: {}
+  }) {
+    this.config = config;
+    this.chunks = new Map();
+  }
+
+  // Analyze bundle chunks from build output
+  analyzeChunks(buildOutput: string): ChunkAnalysis[] {
+    if (!this.config.enabled) return [];
+
+    const lines = buildOutput.split('\n');
+    const chunks: ChunkAnalysis[] = [];
+
+    lines.forEach(line => {
+      // Handle all dist/ patterns
+      if (line.includes('dist/') && line.includes('kB')) {
+        // Use a more flexible regex that captures the essential parts
+        const match = line.match(/\s*dist\/(?:assets\/)?([^\s]+)\s+(\d+\.\d+)\s+kB\s+\│\s*gzip:\s*(\d+\.\d+)\s+kB/);
+        
+        if (match) {
+          const [, filename, size, gzip] = match;
+          const sizeKB = parseFloat(size);
+          const gzipKB = parseFloat(gzip);
+          
+          // Extract name and extension from filename
+          const nameMatch = filename.match(/^([^.]+)(?:\.[^.]+\.([^.]+))?$/);
+          const name = nameMatch ? nameMatch[1] : filename;
+          const ext = nameMatch && nameMatch[2] ? nameMatch[2] : '';
+          
+          const chunk: ChunkAnalysis = {
+            name: ext ? `${name}.${ext}` : name,
+            size: sizeKB * 1024, // Convert to bytes
+            gzippedSize: gzipKB * 1024,
+            modules: this.estimateModulesForChunk(name),
+            dependencies: this.estimateDependencies(name),
+            async: this.isAsyncChunk(name),
+            vendor: this.isVendorChunk(name),
+            common: this.isCommonChunk(name),
+            loadPriority: this.calculateLoadPriority(name, sizeKB)
+          };
+
+          chunks.push(chunk);
+          this.chunks.set(chunk.name, chunk);
+        }
+      }
+    });
+
+    return chunks;
+  }
+
+  // Estimate modules for a specific chunk
+  private estimateModulesForChunk(chunkName: string): string[] {
+    if (chunkName.includes('index')) {
+      return ['main', 'themes', 'components', 'utils'];
+    } else if (chunkName.includes('vendor')) {
+      return ['react', 'react-dom', 'lodash', 'date-fns'];
+    } else if (chunkName.includes('theme')) {
+      return ['theme-provider', 'theme-switcher', 'theme-customizer'];
+    } else if (chunkName.includes('component')) {
+      return ['button', 'card', 'input', 'badge'];
+    } else if (chunkName.includes('util')) {
+      return ['performance', 'bundle', 'tree-shaking', 'lazy-loading'];
+    }
+    return ['unknown'];
+  }
+
+  // Estimate dependencies for a chunk
+  private estimateDependencies(chunkName: string): string[] {
+    if (chunkName.includes('index')) {
+      return ['vendor', 'theme', 'component'];
+    } else if (chunkName.includes('vendor')) {
+      return [];
+    } else if (chunkName.includes('theme')) {
+      return ['vendor'];
+    } else if (chunkName.includes('component')) {
+      return ['vendor', 'theme'];
+    }
+    return [];
+  }
+
+  // Check if chunk is async (lazy-loaded)
+  private isAsyncChunk(chunkName: string): boolean {
+    return chunkName.includes('async') || 
+           chunkName.includes('lazy') || 
+           chunkName.includes('dynamic');
+  }
+
+  // Check if chunk contains vendor libraries
+  private isVendorChunk(chunkName: string): boolean {
+    return chunkName.includes('vendor') || 
+           chunkName.includes('lib') || 
+           chunkName.includes('node_modules');
+  }
+
+  // Check if chunk contains common/shared code
+  private isCommonChunk(chunkName: string): boolean {
+    return chunkName.includes('common') || 
+           chunkName.includes('shared') || 
+           chunkName.includes('runtime');
+  }
+
+  // Calculate load priority for a chunk
+  private calculateLoadPriority(chunkName: string, sizeKB: number): 'high' | 'medium' | 'low' {
+    if (chunkName.includes('index') || chunkName.includes('main')) {
+      return 'high';
+    } else if (chunkName.includes('vendor') || chunkName.includes('common')) {
+      return 'medium';
+    } else if (sizeKB > 100) {
+      return 'low';
+    }
+    return 'medium';
+  }
+
+  // Generate bundle splitting recommendations
+  generateRecommendations(chunks: ChunkAnalysis[]): string[] {
+    const recommendations: string[] = [];
+
+    // Check chunk count
+    if (chunks.length > this.config.maxChunks) {
+      recommendations.push(`Too many chunks (${chunks.length}). Consider consolidating smaller chunks to reduce HTTP requests.`);
+    }
+
+    // Check chunk sizes
+    const oversizedChunks = chunks.filter(chunk => chunk.size > this.config.chunkSize);
+    if (oversizedChunks.length > 0) {
+      recommendations.push(`${oversizedChunks.length} chunks exceed the recommended size of ${this.config.chunkSize / 1024}KB. Consider splitting them further.`);
+    }
+
+    const undersizedChunks = chunks.filter(chunk => chunk.size < this.config.minChunkSize);
+    if (undersizedChunks.length > 0) {
+      recommendations.push(`${undersizedChunks.length} chunks are too small (below ${this.config.minChunkSize / 1024}KB). Consider merging them.`);
+    }
+
+    // Check vendor chunk strategy
+    const vendorChunks = chunks.filter(chunk => chunk.vendor);
+    if (vendorChunks.length === 0 && this.config.vendorChunk) {
+      recommendations.push('No vendor chunk detected. Consider creating a separate vendor chunk for third-party libraries.');
+    } else if (vendorChunks.length > 1) {
+      recommendations.push('Multiple vendor chunks detected. Consider consolidating into a single vendor chunk.');
+    }
+
+    // Check async chunk strategy
+    const asyncChunks = chunks.filter(chunk => chunk.async);
+    if (asyncChunks.length === 0 && this.config.asyncChunk) {
+      recommendations.push('No async chunks detected. Consider implementing code splitting for better performance.');
+    }
+
+    // Check load priorities
+    const highPriorityChunks = chunks.filter(chunk => chunk.loadPriority === 'high');
+    if (highPriorityChunks.length > 3) {
+      recommendations.push('Too many high-priority chunks. Consider reducing critical chunks to improve initial load time.');
+    }
+
+    if (recommendations.length === 0) {
+      recommendations.push('Bundle splitting is well-optimized. No immediate actions required.');
+    }
+
+    return recommendations;
+  }
+
+  // Calculate optimization score
+  calculateOptimizationScore(chunks: ChunkAnalysis[]): number {
+    let score = 100;
+
+    // Penalize too many chunks
+    if (chunks.length > this.config.maxChunks) {
+      score -= (chunks.length - this.config.maxChunks) * 5;
+    }
+
+    // Penalize oversized chunks
+    const oversizedChunks = chunks.filter(chunk => chunk.size > this.config.chunkSize);
+    score -= oversizedChunks.length * 10;
+
+    // Penalize undersized chunks
+    const undersizedChunks = chunks.filter(chunk => chunk.size < this.config.minChunkSize);
+    score -= undersizedChunks.length * 3;
+
+    // Penalize missing vendor chunk
+    const vendorChunks = chunks.filter(chunk => chunk.vendor);
+    if (vendorChunks.length === 0 && this.config.vendorChunk) {
+      score -= 15;
+    }
+
+    // Penalize missing async chunks
+    const asyncChunks = chunks.filter(chunk => chunk.async);
+    if (asyncChunks.length === 0 && this.config.asyncChunk) {
+      score -= 10;
+    }
+
+    return Math.max(0, score);
+  }
+
+  // Generate Vite configuration for bundle splitting
+  generateViteConfig(): string {
+    const config = {
+      build: {
+        rollupOptions: {
+          output: {
+            manualChunks: this.generateManualChunks(),
+            chunkFileNames: this.generateChunkFileNames(),
+            entryFileNames: this.generateEntryFileNames(),
+            assetFileNames: this.generateAssetFileNames()
+          }
+        },
+        chunkSizeWarningLimit: this.config.chunkSize / 1024,
+        minify: 'terser',
+        sourcemap: true
+      }
+    };
+
+    return JSON.stringify(config, null, 2);
+  }
+
+  // Generate manual chunk configuration
+  private generateManualChunks(): Record<string, string[]> {
+    const chunks: Record<string, string[]> = {};
+
+    if (this.config.vendorChunk) {
+      chunks.vendor = [
+        'react',
+        'react-dom',
+        'react-router-dom'
+      ];
+    }
+
+    if (this.config.commonChunk) {
+      chunks.common = [
+        'src/utils',
+        'src/themes',
+        'src/components/ui'
+      ];
+    }
+
+    if (this.config.asyncChunk) {
+      chunks.async = [
+        'src/components/advanced',
+        'src/features'
+      ];
+    }
+
+    return chunks;
+  }
+
+  // Generate chunk file naming pattern
+  private generateChunkFileNames(): string {
+    if (this.config.strategy === 'dynamic') {
+      return 'assets/[name]-[hash].js';
+    } else if (this.config.strategy === 'static') {
+      return 'assets/[name].js';
+    } else {
+      return 'assets/[name]-[hash].js';
+    }
+  }
+
+  // Generate entry file naming pattern
+  private generateEntryFileNames(): string {
+    return 'assets/[name]-[hash].js';
+  }
+
+  // Generate asset file naming pattern
+  private generateAssetFileNames(): string {
+    return 'assets/[name]-[hash].[ext]';
+  }
+
+  // Generate webpack configuration for bundle splitting
+  generateWebpackConfig(): string {
+    const config = {
+      optimization: {
+        splitChunks: {
+          chunks: 'all',
+          minSize: this.config.minChunkSize,
+          maxSize: this.config.chunkSize,
+          maxChunks: this.config.maxChunks,
+          cacheGroups: this.generateWebpackCacheGroups()
+        }
+      }
+    };
+
+    return JSON.stringify(config, null, 2);
+  }
+
+  // Generate webpack cache groups
+  private generateWebpackCacheGroups(): Record<string, any> {
+    const cacheGroups: Record<string, any> = {};
+
+    if (this.config.vendorChunk) {
+      cacheGroups.vendor = {
+        test: /[\\/]node_modules[\\/]/,
+        name: 'vendor',
+        chunks: 'all',
+        priority: 10
+      };
+    }
+
+    if (this.config.commonChunk) {
+      cacheGroups.common = {
+        name: 'common',
+        minChunks: 2,
+        chunks: 'all',
+        priority: 5
+      };
+    }
+
+    // Add custom cache groups from config
+    Object.assign(cacheGroups, this.config.cacheGroups);
+
+    return cacheGroups;
+  }
+
+  // Generate dynamic import patterns for code splitting
+  generateDynamicImports(): string[] {
+    const patterns: string[] = [];
+
+    if (this.config.asyncChunk) {
+      patterns.push(
+        "// Theme switching",
+        "const ThemeSwitcher = lazy(() => import('./components/ThemeSwitcher'))",
+        "",
+        "// Advanced components",
+        "const AdvancedTable = lazy(() => import('./components/AdvancedTable'))",
+        "const DataGrid = lazy(() => import('./components/DataGrid'))",
+        "",
+        "// Features",
+        "const Dashboard = lazy(() => import('./features/Dashboard'))",
+        "const Settings = lazy(() => import('./features/Settings'))"
+      );
+    }
+
+    return patterns;
+  }
+
+  // Generate preload strategies
+  generatePreloadStrategies(): string[] {
+    const strategies: string[] = [];
+
+    if (this.config.preloadChunks) {
+      strategies.push(
+        "// Preload critical chunks",
+        "const preloadCriticalChunks = () => {",
+        "  const criticalChunks = ['vendor', 'common'];",
+        "  criticalChunks.forEach(chunk => {",
+        "    const link = document.createElement('link');",
+        "    link.rel = 'preload';",
+        "    link.as = 'script';",
+        "    link.href = `/assets/${chunk}-[hash].js`;",
+        "    document.head.appendChild(link);",
+        "  });",
+        "};",
+        "",
+        "// Preload on route change",
+        "const preloadRouteChunk = (route: string) => {",
+        "  const link = document.createElement('link');",
+        "  link.rel = 'prefetch';",
+        "  link.as = 'script';",
+        "  link.href = `/assets/${route}-[hash].js`;",
+        "  document.head.appendChild(link);",
+        "};"
+      );
+    }
+
+    return strategies;
+  }
+
+  // Get bundle splitting statistics
+  getStatistics(chunks: ChunkAnalysis[]): {
+    totalSize: number;
+    totalGzippedSize: number;
+    chunkCount: number;
+    averageChunkSize: number;
+    vendorChunkCount: number;
+    asyncChunkCount: number;
+    commonChunkCount: number;
+    optimizationScore: number;
+  } {
+    const totalSize = chunks.reduce((sum, chunk) => sum + chunk.size, 0);
+    const totalGzippedSize = chunks.reduce((sum, chunk) => sum + chunk.gzippedSize, 0);
+    const averageChunkSize = chunks.length > 0 ? totalSize / chunks.length : 0;
+    const vendorChunkCount = chunks.filter(chunk => chunk.vendor).length;
+    const asyncChunkCount = chunks.filter(chunk => chunk.async).length;
+    const commonChunkCount = chunks.filter(chunk => chunk.common).length;
+    const optimizationScore = this.calculateOptimizationScore(chunks);
+
+    return {
+      totalSize,
+      totalGzippedSize,
+      chunkCount: chunks.length,
+      averageChunkSize,
+      vendorChunkCount,
+      asyncChunkCount,
+      commonChunkCount,
+      optimizationScore
+    };
+  }
+
+  // Export bundle splitting analysis
+  exportAnalysis(chunks: ChunkAnalysis[]): string {
+    const recommendations = this.generateRecommendations(chunks);
+    const statistics = this.getStatistics(chunks);
+    const viteConfig = this.generateViteConfig();
+    const webpackConfig = this.generateWebpackConfig();
+    const dynamicImports = this.generateDynamicImports();
+    const preloadStrategies = this.generatePreloadStrategies();
+
+    return JSON.stringify({
+      chunks,
+      statistics,
+      recommendations,
+      configurations: {
+        vite: viteConfig,
+        webpack: webpackConfig
+      },
+      codeSplitting: {
+        dynamicImports,
+        preloadStrategies
+      },
+      timestamp: new Date().toISOString()
+    }, null, 2);
+  }
+
+  // Update configuration
+  updateConfig(newConfig: Partial<BundleSplitConfig>): void {
+    this.config = { ...this.config, ...newConfig };
+  }
+
+  // Get current configuration
+  getConfig(): BundleSplitConfig {
+    return { ...this.config };
+  }
+}
+
+// Create and export default instance
+export const bundleSplitter = new BundleSplitter();