jinbi-utils 1.0.19 → 1.0.21

package/src/build/chunk-optimizer/core/chunk-generator.ts

@@ -0,0 +1,166 @@
+/**
+ * Chunk 生成器 - 生成 manualChunks 函数
+ */
+import type {
+  ManualChunksFunction,
+  DependencyInfo,
+  SourceCodeStrategy,
+} from '../types';
+
+/**
+ * Chunk 生成器
+ */
+export class ChunkGenerator {
+  private dependencyMap: Map<string, string>;
+  private sourceCodeStrategy: SourceCodeStrategy;
+  private debug: boolean;
+
+  constructor(
+    dependencies: DependencyInfo[],
+    sourceCodeStrategy: SourceCodeStrategy = {},
+    debug: boolean = false
+  ) {
+    // 构建依赖名称到分类的映射
+    this.dependencyMap = new Map();
+    dependencies.forEach(dep => {
+      if (dep.category) {
+        this.dependencyMap.set(dep.name, dep.category);
+      }
+    });
+
+    this.sourceCodeStrategy = {
+      views: true,
+      components: true,
+      utils: true,
+      store: true,
+      ...sourceCodeStrategy,
+    };
+
+    this.debug = debug;
+  }
+
+  /**
+   * 从模块 ID 中提取包名
+   */
+  private extractPackageName(id: string): string | null {
+    const match = id.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)/);
+    return match ? match[1] : null;
+  }
+
+  /**
+   * 处理 node_modules 依赖
+   */
+  private handleNodeModules(id: string): string | undefined {
+    const packageName = this.extractPackageName(id);
+    
+    if (!packageName) {
+      return undefined;
+    }
+
+    // 查找依赖分类
+    const category = this.dependencyMap.get(packageName);
+    
+    if (this.debug && category) {
+      console.log(`[Chunk] ${packageName} -> ${category}`);
+    }
+
+    return category;
+  }
+
+  /**
+   * 处理业务代码
+   */
+  private handleSourceCode(id: string): string | undefined {
+    // 处理 views 目录
+    if (this.sourceCodeStrategy.views && id.includes('/src/views/')) {
+      const match = id.match(/\/src\/views\/([^/]+)\//);
+      if (match) {
+        return `chunk-${match[1]}`;
+      }
+      return 'chunk-views';
+    }
+
+    // 处理 components 目录
+    if (this.sourceCodeStrategy.components && id.includes('/src/components/')) {
+      return 'chunk-components';
+    }
+
+    // 处理 utils 和 config 目录
+    if (this.sourceCodeStrategy.utils) {
+      if (id.includes('/src/utils/') || id.includes('/src/config/')) {
+        return 'chunk-common';
+      }
+    }
+
+    // 处理 store 目录
+    if (this.sourceCodeStrategy.store && id.includes('/src/store/')) {
+      return 'chunk-store';
+    }
+
+    // 处理自定义规则
+    if (this.sourceCodeStrategy.custom) {
+      for (const rule of this.sourceCodeStrategy.custom) {
+        if (rule.pattern.test(id)) {
+          return rule.chunkName;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
+  /**
+   * 生成 manualChunks 函数
+   */
+  generate(): ManualChunksFunction {
+    return (id: string) => {
+      // 处理 node_modules 依赖
+      if (id.includes('node_modules')) {
+        return this.handleNodeModules(id);
+      }
+
+      // 处理业务代码
+      return this.handleSourceCode(id);
+    };
+  }
+
+  /**
+   * 获取依赖统计信息
+   */
+  getStats(): {
+    totalDependencies: number;
+    categorizedDependencies: number;
+    categories: string[];
+  } {
+    const categories = new Set<string>();
+    this.dependencyMap.forEach(category => {
+      categories.add(category);
+    });
+
+    return {
+      totalDependencies: this.dependencyMap.size,
+      categorizedDependencies: this.dependencyMap.size,
+      categories: Array.from(categories).sort(),
+    };
+  }
+
+  /**
+   * 打印统计信息
+   */
+  printStats(): void {
+    const stats = this.getStats();
+    
+    console.log('\n🎯 Chunk Optimizer - Statistics\n');
+    console.log(`Total dependencies: ${stats.totalDependencies}`);
+    console.log(`Categorized: ${stats.categorizedDependencies}`);
+    console.log(`\nChunk categories (${stats.categories.length}):`);
+    stats.categories.forEach(category => {
+      const count = Array.from(this.dependencyMap.values()).filter(
+        c => c === category
+      ).length;
+      console.log(`  - ${category}: ${count} packages`);
+    });
+    console.log('');
+  }
+}
+

package/src/build/chunk-optimizer/core/classifier.ts

@@ -0,0 +1,148 @@
+/**
+ * 分类引擎 - 根据规则对依赖进行分类
+ */
+import type { Rule, DependencyInfo, DependencyCategory } from '../types';
+import { getAllRules, sortRulesByPriority } from '../rules';
+
+/**
+ * 依赖分类器
+ */
+export class DependencyClassifier {
+  private rules: Rule[];
+  private customRules: Record<string, DependencyCategory>;
+  private exclude: string[];
+
+  constructor(
+    framework: string = 'auto',
+    customRules: Record<string, DependencyCategory> = {},
+    exclude: string[] = []
+  ) {
+    // 获取并排序规则（按优先级）
+    this.rules = sortRulesByPriority(getAllRules(framework as any));
+    this.customRules = customRules;
+    this.exclude = exclude;
+  }
+
+  /**
+   * 检查是否应该排除某个包
+   */
+  private shouldExclude(packageName: string): boolean {
+    return this.exclude.some(pattern => {
+      if (pattern.includes('*')) {
+        // 支持通配符匹配
+        const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$');
+        return regex.test(packageName);
+      }
+      return packageName === pattern;
+    });
+  }
+
+  /**
+   * 匹配规则
+   */
+  private matchRule(packageName: string, rule: Rule): boolean {
+    if (typeof rule.match === 'string') {
+      return packageName === rule.match;
+    } else {
+      return rule.match.test(packageName);
+    }
+  }
+
+  /**
+   * 对单个依赖进行分类
+   */
+  classifyDependency(dep: DependencyInfo): DependencyCategory | null {
+    // 检查是否应该排除
+    if (this.shouldExclude(dep.name)) {
+      return null;
+    }
+
+    // 优先使用自定义规则
+    if (this.customRules[dep.name]) {
+      return this.customRules[dep.name];
+    }
+
+    // 检查自定义规则中的通配符
+    for (const [pattern, category] of Object.entries(this.customRules)) {
+      if (pattern.includes('*')) {
+        const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$');
+        if (regex.test(dep.name)) {
+          return category;
+        }
+      }
+    }
+
+    // 使用预定义规则
+    for (const rule of this.rules) {
+      if (this.matchRule(dep.name, rule)) {
+        return rule.category;
+      }
+    }
+
+    // 默认分类
+    return 'vendor-libs';
+  }
+
+  /**
+   * 对所有依赖进行分类
+   */
+  classifyAll(dependencies: DependencyInfo[]): DependencyInfo[] {
+    return dependencies.map(dep => ({
+      ...dep,
+      category: this.classifyDependency(dep) || undefined,
+    }));
+  }
+
+  /**
+   * 获取分类统计
+   */
+  getCategoryStats(dependencies: DependencyInfo[]): Record<DependencyCategory, number> {
+    const stats: Record<string, number> = {};
+
+    dependencies.forEach(dep => {
+      if (dep.category) {
+        stats[dep.category] = (stats[dep.category] || 0) + 1;
+      }
+    });
+
+    return stats;
+  }
+
+  /**
+   * 打印分类信息（调试用）
+   */
+  printClassification(dependencies: DependencyInfo[]): void {
+    console.log('\n📦 Chunk Optimizer - Dependency Classification\n');
+
+    const categorized = this.classifyAll(dependencies);
+    const stats = this.getCategoryStats(categorized);
+
+    // 按分类分组
+    const grouped: Record<string, string[]> = {};
+    categorized.forEach(dep => {
+      if (dep.category) {
+        if (!grouped[dep.category]) {
+          grouped[dep.category] = [];
+        }
+        grouped[dep.category].push(dep.name);
+      }
+    });
+
+    // 打印每个分类
+    Object.entries(grouped)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .forEach(([category, packages]) => {
+        console.log(`\n${category} (${packages.length}):`);
+        packages.forEach(pkg => {
+          console.log(`  - ${pkg}`);
+        });
+      });
+
+    console.log('\n📊 Summary:');
+    console.log(`  Total dependencies: ${dependencies.length}`);
+    console.log(`  Categorized: ${categorized.filter(d => d.category).length}`);
+    console.log(`  Categories: ${Object.keys(stats).length}`);
+    console.log('');
+  }
+}
+

package/src/build/chunk-optimizer/core/dependency-reader.ts

@@ -0,0 +1,138 @@
+/**
+ * 依赖读取器 - 读取和解析 package.json
+ */
+import { readFileSync, existsSync } from 'fs';
+import { resolve } from 'path';
+import type { DependencyInfo, Framework } from '../types';
+
+/**
+ * Package.json 结构
+ */
+interface PackageJson {
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+}
+
+/**
+ * 依赖读取器类
+ */
+export class DependencyReader {
+  private packageJsonPath: string;
+  private packageJson: PackageJson | null = null;
+
+  constructor(packageJsonPath?: string) {
+    // 默认使用项目根目录的 package.json
+    this.packageJsonPath = packageJsonPath || resolve(process.cwd(), 'package.json');
+  }
+
+  /**
+   * 读取 package.json
+   */
+  private readPackageJson(): PackageJson {
+    if (this.packageJson) {
+      return this.packageJson;
+    }
+
+    if (!existsSync(this.packageJsonPath)) {
+      throw new Error(`package.json not found at: ${this.packageJsonPath}`);
+    }
+
+    try {
+      const content = readFileSync(this.packageJsonPath, 'utf-8');
+      this.packageJson = JSON.parse(content);
+      return this.packageJson!;
+    } catch (error) {
+      throw new Error(`Failed to parse package.json: ${error}`);
+    }
+  }
+
+  /**
+   * 获取所有依赖信息
+   */
+  getDependencies(): DependencyInfo[] {
+    const pkg = this.readPackageJson();
+    const dependencies: DependencyInfo[] = [];
+
+    // 读取生产依赖
+    if (pkg.dependencies) {
+      Object.entries(pkg.dependencies).forEach(([name, version]) => {
+        dependencies.push({
+          name,
+          version,
+          isDev: false,
+        });
+      });
+    }
+
+    // 读取开发依赖
+    if (pkg.devDependencies) {
+      Object.entries(pkg.devDependencies).forEach(([name, version]) => {
+        dependencies.push({
+          name,
+          version,
+          isDev: true,
+        });
+      });
+    }
+
+    return dependencies;
+  }
+
+  /**
+   * 检测项目使用的框架
+   */
+  detectFramework(): Framework {
+    const pkg = this.readPackageJson();
+    const allDeps = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies,
+    };
+
+    // 检测 Vue
+    if (allDeps['vue']) {
+      return 'vue';
+    }
+
+    // 检测 React
+    if (allDeps['react']) {
+      return 'react';
+    }
+
+    // 检测 Angular
+    if (allDeps['@angular/core']) {
+      return 'angular';
+    }
+
+    // 检测 Svelte
+    if (allDeps['svelte']) {
+      return 'svelte';
+    }
+
+    // 默认返回 auto
+    return 'auto';
+  }
+
+  /**
+   * 检查是否存在某个依赖
+   */
+  hasDependency(name: string): boolean {
+    const pkg = this.readPackageJson();
+    return !!(
+      pkg.dependencies?.[name] ||
+      pkg.devDependencies?.[name]
+    );
+  }
+
+  /**
+   * 获取依赖版本
+   */
+  getDependencyVersion(name: string): string | null {
+    const pkg = this.readPackageJson();
+    return (
+      pkg.dependencies?.[name] ||
+      pkg.devDependencies?.[name] ||
+      null
+    );
+  }
+}
+

package/src/build/chunk-optimizer/examples/basic-usage.ts

@@ -0,0 +1,234 @@
+/**
+ * Chunk Optimizer 使用示例
+ */
+
+import { createChunkOptimizer } from '../index';
+
+// ============================================================
+// 示例 1: 零配置使用（推荐）
+// ============================================================
+export function example1() {
+  const optimizer = createChunkOptimizer();
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+
+// ============================================================
+// 示例 2: 启用调试模式
+// ============================================================
+export function example2() {
+  const optimizer = createChunkOptimizer({
+    debug: true, // 会在构建时打印详细的分包信息
+  });
+  
+  // 手动打印分析报告
+  optimizer.printReport();
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+
+// ============================================================
+// 示例 3: 自定义规则
+// ============================================================
+export function example3() {
+  const optimizer = createChunkOptimizer({
+    framework: 'vue',
+    customRules: {
+      // 将公司内部库单独分包
+      '@company/ui': 'vendor-company-ui',
+      '@company/utils': 'vendor-company-utils',
+      
+      // 将某个大型库单独分包
+      'echarts': 'vendor-echarts',
+      
+      // 使用通配符匹配
+      '@company/*': 'vendor-company',
+    },
+  });
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+
+// ============================================================
+// 示例 4: 排除某些包
+// ============================================================
+export function example4() {
+  const optimizer = createChunkOptimizer({
+    exclude: [
+      '@types/*',      // 排除所有类型定义
+      'vite',          // 排除 vite
+      'rollup',        // 排除 rollup
+      'esbuild',       // 排除 esbuild
+    ],
+  });
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+
+// ============================================================
+// 示例 5: 自定义业务代码分包
+// ============================================================
+export function example5() {
+  const optimizer = createChunkOptimizer({
+    sourceCodeStrategy: {
+      views: true,        // 按 views 模块分包
+      components: true,   // 公共组件单独分包
+      utils: true,        // 工具函数分包
+      store: true,        // store 分包
+      custom: [
+        // 自定义业务代码分包规则
+        {
+          pattern: /\/src\/features\/([^/]+)\//,
+          chunkName: 'feature-$1'
+        },
+        {
+          pattern: /\/src\/modules\/([^/]+)\//,
+          chunkName: 'module-$1'
+        }
+      ]
+    }
+  });
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+
+// ============================================================
+// 示例 6: React 项目使用
+// ============================================================
+export function example6React() {
+  const optimizer = createChunkOptimizer({
+    framework: 'react', // 指定框架为 React
+    customRules: {
+      // React 项目特定的规则
+      'react-query': 'vendor-query',
+      '@tanstack/react-query': 'vendor-query',
+    },
+  });
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+
+// ============================================================
+// 示例 7: 完整配置示例
+// ============================================================
+export function example7Complete() {
+  const optimizer = createChunkOptimizer({
+    // 框架类型
+    framework: 'vue',
+    
+    // 启用调试
+    debug: process.env.NODE_ENV === 'development',
+    
+    // 自定义规则
+    customRules: {
+      '@company/*': 'vendor-company',
+      'echarts': 'vendor-echarts',
+    },
+    
+    // 排除包
+    exclude: ['@types/*', 'vite'],
+    
+    // 业务代码分包
+    sourceCodeStrategy: {
+      views: true,
+      components: true,
+      utils: true,
+      store: true,
+      custom: [
+        {
+          pattern: /\/src\/features\/([^/]+)\//,
+          chunkName: 'feature-$1'
+        }
+      ]
+    }
+  });
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'static/js/[name]-[hash].js',
+          entryFileNames: 'static/js/[name]-[hash].js',
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+
+// ============================================================
+// 示例 8: 获取分析结果
+// ============================================================
+export function example8Analysis() {
+  const optimizer = createChunkOptimizer();
+  
+  // 获取分析结果
+  const result = optimizer.analyze();
+  
+  console.log('检测到的框架:', result.detectedFramework);
+  console.log('依赖总数:', result.dependencies.length);
+  console.log('分类统计:', result.categoryStats);
+  
+  // 打印详细报告
+  optimizer.printReport();
+  
+  return {
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: optimizer.generate()
+        }
+      }
+    }
+  };
+}
+