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

package/dist/utils/bundle-splitting.js

@@ -0,0 +1,458 @@
+// Bundle splitting utilities for optimizing build process and loading performance
+export interface BundleSplitConfig {
+  enabled;
+  strategy;
+  chunkSize;
+  maxChunks;
+  minChunkSize;
+  vendorChunk;
+  commonChunk;
+  asyncChunk;
+  preloadChunks;
+  cacheGroups, any>;
+}
+
+export interface ChunkAnalysis {
+  name;
+  size;
+  gzippedSize;
+  modules];
+  dependencies];
+  async;
+  vendor;
+  common;
+  loadPriority;
+}
+
+export interface BundleSplitReport {
+  chunks];
+  totalSize;
+  totalGzippedSize;
+  chunkCount;
+  averageChunkSize;
+  optimizationScore;
+  recommendations];
+  timestamp;
+}
+
+export class BundleSplitter {
+  private config;
+  private chunks, ChunkAnalysis>;
+
+  constructor(config= {
+    enabled,
+    strategy,
+    chunkSize, // 244KB
+    maxChunks,
+    minChunkSize, // 30KB
+    vendorChunk,
+    commonChunk,
+    asyncChunk,
+    preloadChunks,
+    cacheGroups}
+  }) {
+    this.config = config;
+    this.chunks = new Map();
+  }
+
+  // Analyze bundle chunks from build output
+  analyzeChunks(buildOutput)] {
+    if (!this.config.enabled) return [];
+
+    const lines = buildOutput.split('\n');
+    const chunks] = [];
+
+    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\/(?)?([^\s]+)\s+(\d+\.\d+)\s+kB\s+\│\s*gzip)\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] ;
+          const ext = nameMatch && nameMatch[2] ? nameMatch[2] ;
+          
+          const chunk= {
+            name}.${ext}` ,
+            size, // Convert to bytes
+            gzippedSize,
+            modules),
+            dependencies),
+            async),
+            vendor),
+            common),
+            loadPriority, sizeKB)
+          };
+
+          chunks.push(chunk);
+          this.chunks.set(chunk.name, chunk);
+        }
+      }
+    });
+
+    return chunks;
+  }
+
+  // Estimate modules for a specific chunk
+  private estimateModulesForChunk(chunkName)] {
+    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)] {
+    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)) || 
+           chunkName.includes('lazy') || 
+           chunkName.includes('dynamic');
+  }
+
+  // Check if chunk contains vendor libraries
+  private isVendorChunk(chunkName)) || 
+           chunkName.includes('lib') || 
+           chunkName.includes('node_modules');
+  }
+
+  // Check if chunk contains common/shared code
+  private isCommonChunk(chunkName)) || 
+           chunkName.includes('shared') || 
+           chunkName.includes('runtime');
+  }
+
+  // Calculate load priority for a chunk
+  private calculateLoadPriority(chunkName, sizeKB)) || 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])] {
+    const recommendations] = [];
+
+    // 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])= 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()= {
+      build),
+            chunkFileNames),
+            entryFileNames),
+            assetFileNames)
+          }
+        },
+        chunkSizeWarningLimit,
+        minify,
+        sourcemap}
+    };
+
+    return JSON.stringify(config, null, 2);
+  }
+
+  // Generate manual chunk configuration
+  private generateManualChunks(), string[]> {
+    const chunks, 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()=== '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()]-[hash].js';
+  }
+
+  // Generate asset file naming pattern
+  private generateAssetFileNames()]-[hash].[ext]';
+  }
+
+  // Generate webpack configuration for bundle splitting
+  generateWebpackConfig()= {
+      optimization,
+          minSize,
+          maxSize,
+          maxChunks,
+          cacheGroups)
+        }
+      }
+    };
+
+    return JSON.stringify(config, null, 2);
+  }
+
+  // Generate webpack cache groups
+  private generateWebpackCacheGroups(), any> {
+    const cacheGroups, any> = {};
+
+    if (this.config.vendorChunk) {
+      cacheGroups.vendor = {
+        test]node_modules[\\/]/,
+        name,
+        chunks,
+        priority};
+    }
+
+    if (this.config.commonChunk) {
+      cacheGroups.common = {
+        name,
+        minChunks,
+        chunks,
+        priority};
+    }
+
+    // Add custom cache groups from config
+    Object.assign(cacheGroups, this.config.cacheGroups);
+
+    return cacheGroups;
+  }
+
+  // Generate dynamic import patterns for code splitting
+  generateDynamicImports()] {
+    const patterns] = [];
+
+    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()] {
+    const strategies] = [];
+
+    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) => {",
+        "  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]);
+    totalGzippedSize;
+    chunkCount;
+    averageChunkSize;
+    vendorChunkCount;
+    asyncChunkCount;
+    commonChunkCount;
+    optimizationScore;
+  } {
+    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 ;
+    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,
+      averageChunkSize,
+      vendorChunkCount,
+      asyncChunkCount,
+      commonChunkCount,
+      optimizationScore
+    };
+  }
+
+  // Export bundle splitting analysis
+  exportAnalysis(chunks])= 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,
+        webpack},
+      codeSplitting,
+        preloadStrategies
+      },
+      timestamp).toISOString()
+    }, null, 2);
+  }
+
+  // Update configuration
+  updateConfig(newConfig)= { ...this.config, ...newConfig };
+  }
+
+  // Get current configuration
+  getConfig()};
+  }
+}
+
+// Create and export default instance
+export const bundleSplitter = new BundleSplitter();