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

package/dist/utils/bundle-splitting.d.ts

@@ -1,483 +0,0 @@
-// 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 declare const bundleSplitter: new BundleSplitter();