jinbi-utils 1.0.20 → 1.0.21

package/src/build/chunk-optimizer/README.md

@@ -0,0 +1,240 @@
+# Vite Chunk Optimizer
+
+🚀 智能分包优化工具 - 自动分析项目依赖并生成最优的 Vite `manualChunks` 配置
+
+## ✨ 特性
+
+- 🎯 **零配置** - 开箱即用，自动检测框架和依赖
+- 🧠 **智能分类** - 基于预定义规则库自动分类依赖
+- 🔧 **高度可定制** - 支持自定义规则和分包策略
+- 📊 **可视化分析** - 提供详细的依赖分析报告
+- 🎨 **多框架支持** - 支持 Vue、React、Angular、Svelte
+- 📦 **TypeScript** - 完整的类型定义支持
+
+## 📦 安装
+
+```bash
+# 本项目已内置，无需安装
+# 如需在其他项目使用，可以复制 build/chunk-optimizer 目录
+```
+
+## 🚀 快速开始
+
+### 基础用法（零配置）
+
+```typescript
+// vite.config.ts
+import { createChunkOptimizer } from './build/chunk-optimizer';
+
+const optimizer = createChunkOptimizer();
+
+export default {
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: optimizer.generate()
+      }
+    }
+  }
+}
+```
+
+### 高级用法（自定义配置）
+
+```typescript
+import { createChunkOptimizer } from './build/chunk-optimizer';
+
+const optimizer = createChunkOptimizer({
+  // 框架类型（默认自动检测）
+  framework: 'vue', // 'vue' | 'react' | 'angular' | 'svelte' | 'auto'
+  
+  // 分包策略（未来支持）
+  strategy: 'balanced', // 'balanced' | 'aggressive' | 'conservative'
+  
+  // 自定义规则（会覆盖默认规则）
+  customRules: {
+    'my-custom-lib': 'vendor-custom',
+    '@company/*': 'vendor-company',
+  },
+  
+  // 排除某些包
+  exclude: ['@types/*', 'vite'],
+  
+  // 最小 chunk 大小（KB）
+  minChunkSize: 20,
+  
+  // 调试模式（会打印详细信息）
+  debug: true,
+  
+  // 业务代码分包策略
+  sourceCodeStrategy: {
+    views: true,        // 按 views 模块分包
+    components: true,   // 公共组件单独分包
+    utils: true,        // 工具函数分包
+    store: true,        // store 分包
+    custom: [           // 自定义业务代码规则
+      {
+        pattern: /\/src\/features\/([^/]+)\//,
+        chunkName: 'feature-$1'
+      }
+    ]
+  }
+});
+
+export default {
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: optimizer.generate()
+      }
+    }
+  }
+}
+```
+
+## 📊 分析报告
+
+启用调试模式查看详细的依赖分析：
+
+```typescript
+const optimizer = createChunkOptimizer({ debug: true });
+
+// 或者手动打印报告
+optimizer.printReport();
+```
+
+输出示例：
+
+```
+============================================================
+📦 Vite Chunk Optimizer - Analysis Report
+============================================================
+
+Framework: vue
+Strategy: balanced
+Total Dependencies: 45
+
+Chunk Distribution:
+  vendor-vue                15 (33.3%)
+  vendor-utils              12 (26.7%)
+  vendor-element            8  (17.8%)
+  vendor-icons              5  (11.1%)
+  vendor-libs               5  (11.1%)
+
+============================================================
+```
+
+## 🎯 默认分包规则
+
+### Vendor 分包
+
+| Chunk 名称 | 包含的库 | 说明 |
+|-----------|---------|------|
+| `vendor-vue` | vue, pinia, @vue/* | Vue 核心框架 |
+| `vendor-router` | vue-router | 路由库 |
+| `vendor-element` | element-plus | Element Plus UI |
+| `vendor-ui` | ant-design-vue, naive-ui 等 | 其他 UI 框架 |
+| `vendor-utils` | axios, dayjs, lodash 等 | 工具库 |
+| `vendor-icons` | @iconify/*, unplugin-icons | 图标库 |
+| `vendor-i18n` | vue-i18n, @intlify/* | 国际化 |
+| `vendor-vueuse` | @vueuse/* | VueUse 工具集 |
+| `vendor-libs` | 其他第三方库 | 兜底分类 |
+
+### 业务代码分包
+
+| Chunk 名称 | 路径 | 说明 |
+|-----------|------|------|
+| `chunk-{模块名}` | /src/views/{模块}/ | 按页面模块分包 |
+| `chunk-components` | /src/components/ | 公共组件 |
+| `chunk-common` | /src/utils/, /src/config/ | 工具和配置 |
+| `chunk-store` | /src/store/ | 状态管理 |
+
+## 🔧 自定义规则
+
+### 添加自定义分类
+
+```typescript
+const optimizer = createChunkOptimizer({
+  customRules: {
+    // 精确匹配
+    'my-lib': 'vendor-custom',
+    
+    // 通配符匹配
+    '@company/*': 'vendor-company',
+    
+    // 覆盖默认规则
+    'element-plus': 'vendor-ui', // 将 element-plus 归类到 vendor-ui
+  }
+});
+```
+
+### 排除某些包
+
+```typescript
+const optimizer = createChunkOptimizer({
+  exclude: [
+    '@types/*',      // 排除所有类型定义
+    'vite',          // 排除 vite
+    'rollup',        // 排除 rollup
+  ]
+});
+```
+
+## 📚 API 文档
+
+### `createChunkOptimizer(options?)`
+
+创建 Chunk 优化器实例。
+
+**参数：**
+- `options` - 配置选项（可选）
+
+**返回：**
+- `ChunkOptimizer` 实例
+
+### `ChunkOptimizer.generate()`
+
+生成 `manualChunks` 函数。
+
+**返回：**
+- `ManualChunksFunction` - 可直接用于 Vite 配置
+
+### `ChunkOptimizer.analyze()`
+
+分析项目依赖。
+
+**返回：**
+- `AnalysisResult` - 包含依赖信息和统计数据
+
+### `ChunkOptimizer.printReport()`
+
+打印详细的分析报告到控制台。
+
+## 🎨 分包策略（未来支持）
+
+### Balanced（平衡）- 默认
+
+- 合理的 chunk 数量
+- 平衡首屏加载和缓存利用率
+- 适合大多数项目
+
+### Aggressive（激进）
+
+- 更细粒度的分包
+- 最大化并行加载
+- 适合大型项目
+
+### Conservative（保守）
+
+- 较少的 chunk 数量
+- 减少 HTTP 请求
+- 适合小型项目
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 📄 License
+
+MIT
+

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
+    );
+  }
+}
+