jinbi-utils 1.0.19 → 1.0.21

package/src/build/chunk-optimizer/index.ts

@@ -0,0 +1,166 @@
+/**
+ * Vite Chunk Optimizer
+ * 智能分包优化工具 - 自动分析依赖并生成最优的 manualChunks 配置
+ * 
+ * @author Your Name
+ * @license MIT
+ */
+
+import type {
+  ChunkOptimizerOptions,
+  ManualChunksFunction,
+  AnalysisResult,
+} from './types';
+import { DependencyReader } from './core/dependency-reader';
+import { DependencyClassifier } from './core/classifier';
+import { ChunkGenerator } from './core/chunk-generator';
+
+/**
+ * Chunk 优化器类
+ */
+export class ChunkOptimizer {
+  private reader: DependencyReader;
+  private classifier: DependencyClassifier;
+  private generator: ChunkGenerator | null = null;
+  private options: Required<ChunkOptimizerOptions>;
+
+  constructor(options: ChunkOptimizerOptions = {}) {
+    // 设置默认选项
+    this.options = {
+      framework: options.framework || 'auto',
+      strategy: options.strategy || 'balanced',
+      customRules: options.customRules || {},
+      exclude: options.exclude || ['@types/*'],
+      minChunkSize: options.minChunkSize || 0,
+      debug: options.debug || false,
+      sourceCodeStrategy: {
+        views: true,
+        components: true,
+        utils: true,
+        store: true,
+        ...options.sourceCodeStrategy,
+      },
+      packageJsonPath: options.packageJsonPath || '',
+    };
+
+    // 初始化依赖读取器
+    this.reader = new DependencyReader(this.options.packageJsonPath);
+
+    // 自动检测框架
+    if (this.options.framework === 'auto') {
+      this.options.framework = this.reader.detectFramework();
+      if (this.options.debug) {
+        console.log(`🔍 Detected framework: ${this.options.framework}`);
+      }
+    }
+
+    // 初始化分类器
+    this.classifier = new DependencyClassifier(
+      this.options.framework,
+      this.options.customRules,
+      this.options.exclude
+    );
+  }
+
+  /**
+   * 分析依赖
+   */
+  analyze(): AnalysisResult {
+    const dependencies = this.reader.getDependencies();
+    const classified = this.classifier.classifyAll(dependencies);
+    const stats = this.classifier.getCategoryStats(classified);
+
+    return {
+      dependencies: classified,
+      detectedFramework: this.options.framework,
+      categoryStats: stats,
+    };
+  }
+
+  /**
+   * 生成 manualChunks 函数
+   */
+  generate(): ManualChunksFunction {
+    if (this.generator) {
+      return this.generator.generate();
+    }
+
+    // 分析依赖
+    const result = this.analyze();
+
+    // 如果开启调试模式，打印分类信息
+    if (this.options.debug) {
+      this.classifier.printClassification(result.dependencies);
+    }
+
+    // 创建生成器
+    this.generator = new ChunkGenerator(
+      result.dependencies,
+      this.options.sourceCodeStrategy,
+      this.options.debug
+    );
+
+    // 如果开启调试模式，打印统计信息
+    if (this.options.debug) {
+      this.generator.printStats();
+    }
+
+    return this.generator.generate();
+  }
+
+  /**
+   * 获取分析结果
+   */
+  getAnalysisResult(): AnalysisResult {
+    return this.analyze();
+  }
+
+  /**
+   * 打印分析报告
+   */
+  printReport(): void {
+    const result = this.analyze();
+    
+    console.log('\n' + '='.repeat(60));
+    console.log('📦 Vite Chunk Optimizer - Analysis Report');
+    console.log('='.repeat(60) + '\n');
+
+    console.log(`Framework: ${result.detectedFramework}`);
+    console.log(`Strategy: ${this.options.strategy}`);
+    console.log(`Total Dependencies: ${result.dependencies.length}\n`);
+
+    console.log('Chunk Distribution:');
+    Object.entries(result.categoryStats)
+      .sort(([, a], [, b]) => b - a)
+      .forEach(([category, count]) => {
+        const percentage = ((count / result.dependencies.length) * 100).toFixed(1);
+        console.log(`  ${category.padEnd(25)} ${count.toString().padStart(3)} (${percentage}%)`);
+      });
+
+    console.log('\n' + '='.repeat(60) + '\n');
+  }
+}
+
+/**
+ * 创建 Chunk 优化器（工厂函数）
+ */
+export function createChunkOptimizer(
+  options: ChunkOptimizerOptions = {}
+): ChunkOptimizer {
+  return new ChunkOptimizer(options);
+}
+
+// 导出类型
+export type {
+  ChunkOptimizerOptions,
+  ManualChunksFunction,
+  AnalysisResult,
+  Framework,
+  Strategy,
+  DependencyCategory,
+  SourceCodeStrategy,
+} from './types';
+
+// 默认导出
+export default createChunkOptimizer;
+

package/src/build/chunk-optimizer/rules/common-rules.ts

@@ -0,0 +1,131 @@
+/**
+ * 通用库的分包规则
+ */
+import type { Rule } from '../types';
+
+/**
+ * 工具库规则
+ */
+export const utilsRules: Rule[] = [
+  // 日期时间
+  { match: 'dayjs', category: 'vendor-utils', priority: 60, description: '日期时间库' },
+  { match: 'moment', category: 'vendor-utils', priority: 60, description: 'Moment.js' },
+  { match: 'date-fns', category: 'vendor-utils', priority: 60, description: 'date-fns' },
+  
+  // HTTP 请求
+  { match: 'axios', category: 'vendor-utils', priority: 70, description: 'Axios HTTP 客户端' },
+  { match: 'ky', category: 'vendor-utils', priority: 70, description: 'Ky HTTP 客户端' },
+  
+  // 工具函数
+  { match: 'lodash', category: 'vendor-utils', priority: 60, description: 'Lodash' },
+  { match: 'lodash-es', category: 'vendor-utils', priority: 60, description: 'Lodash ES' },
+  { match: 'ramda', category: 'vendor-utils', priority: 60, description: 'Ramda' },
+  
+  // Cookie & Storage
+  { match: 'js-cookie', category: 'vendor-utils', priority: 50, description: 'JS Cookie' },
+  { match: 'localforage', category: 'vendor-utils', priority: 50, description: 'LocalForage' },
+  { match: 'responsive-storage', category: 'vendor-utils', priority: 50, description: 'Responsive Storage' },
+  
+  // 查询字符串
+  { match: 'qs', category: 'vendor-utils', priority: 50, description: 'Query String' },
+  
+  // 事件总线
+  { match: 'mitt', category: 'vendor-utils', priority: 50, description: 'Mitt 事件总线' },
+  { match: 'eventemitter3', category: 'vendor-utils', priority: 50, description: 'EventEmitter3' },
+  
+  // 数学计算
+  { match: 'decimal.js', category: 'vendor-utils', priority: 50, description: 'Decimal.js' },
+  { match: 'big.js', category: 'vendor-utils', priority: 50, description: 'Big.js' },
+  
+  // 拖拽
+  { match: 'sortablejs', category: 'vendor-utils', priority: 50, description: 'SortableJS' },
+  
+  // 动画
+  { match: 'animate.css', category: 'vendor-utils', priority: 40, description: 'Animate.css' },
+  { match: '@vueuse/motion', category: 'vendor-utils', priority: 40, description: 'VueUse Motion' },
+  
+  // 其他工具
+  { match: 'nprogress', category: 'vendor-utils', priority: 40, description: 'NProgress' },
+  { match: 'path-browserify', category: 'vendor-utils', priority: 40, description: 'Path Browserify' },
+];
+
+/**
+ * 图标库规则
+ */
+export const iconRules: Rule[] = [
+  { match: /^@iconify\//, category: 'vendor-icons', priority: 60, description: 'Iconify' },
+  { match: 'unplugin-icons', category: 'vendor-icons', priority: 60, description: 'Unplugin Icons' },
+  { match: /-icons?$/, category: 'vendor-icons', priority: 50, description: '图标库（通用匹配）' },
+];
+
+/**
+ * 表单和验证规则
+ */
+export const formRules: Rule[] = [
+  { match: 'vee-validate', category: 'vendor-utils', priority: 50, description: 'VeeValidate' },
+  { match: 'yup', category: 'vendor-utils', priority: 50, description: 'Yup 验证' },
+  { match: 'zod', category: 'vendor-utils', priority: 50, description: 'Zod 验证' },
+  { match: '@zxcvbn-ts/core', category: 'vendor-utils', priority: 40, description: 'Zxcvbn 密码强度' },
+];
+
+/**
+ * 图表库规则
+ */
+export const chartRules: Rule[] = [
+  { match: 'echarts', category: 'vendor-charts', priority: 70, description: 'ECharts' },
+  { match: 'chart.js', category: 'vendor-charts', priority: 70, description: 'Chart.js' },
+  { match: 'd3', category: 'vendor-charts', priority: 70, description: 'D3.js' },
+  { match: /^@antv\//, category: 'vendor-charts', priority: 70, description: 'AntV 图表' },
+];
+
+/**
+ * 富文本编辑器规则
+ */
+export const editorRules: Rule[] = [
+  { match: 'quill', category: 'vendor-editor', priority: 60, description: 'Quill 编辑器' },
+  { match: '@wangeditor/editor', category: 'vendor-editor', priority: 60, description: 'wangEditor' },
+  { match: 'tinymce', category: 'vendor-editor', priority: 60, description: 'TinyMCE' },
+  { match: '@tiptap/vue-3', category: 'vendor-editor', priority: 60, description: 'Tiptap' },
+];
+
+/**
+ * 表格库规则
+ */
+export const tableRules: Rule[] = [
+  { match: 'vxe-table', category: 'vendor-table', priority: 70, description: 'VXE Table' },
+  { match: 'ag-grid', category: 'vendor-table', priority: 70, description: 'AG Grid' },
+];
+
+/**
+ * 中国特色库规则
+ */
+export const chinaRules: Rule[] = [
+  { match: 'china-area-data', category: 'vendor-utils', priority: 40, description: '中国地区数据' },
+  { match: 'pinyin-pro', category: 'vendor-utils', priority: 40, description: '拼音转换' },
+];
+
+/**
+ * 业务组件库规则
+ */
+export const businessRules: Rule[] = [
+  { match: 'plus-pro-components', category: 'vendor-pro', priority: 70, description: 'Plus Pro Components' },
+  { match: 'vue-tippy', category: 'vendor-utils', priority: 40, description: 'Vue Tippy' },
+  { match: 'vue-types', category: 'vendor-utils', priority: 40, description: 'Vue Types' },
+];
+
+/**
+ * 获取所有通用规则
+ */
+export function getCommonRules(): Rule[] {
+  return [
+    ...utilsRules,
+    ...iconRules,
+    ...formRules,
+    ...chartRules,
+    ...editorRules,
+    ...tableRules,
+    ...chinaRules,
+    ...businessRules,
+  ];
+}
+

package/src/build/chunk-optimizer/rules/framework-rules.ts

@@ -0,0 +1,93 @@
+/**
+ * 框架相关的分包规则
+ */
+import type { Rule } from '../types';
+
+/**
+ * Vue 生态规则
+ */
+export const vueRules: Rule[] = [
+  // Vue 核心
+  { match: 'vue', category: 'vendor-vue', priority: 100, description: 'Vue 核心框架' },
+  { match: /^@vue\//, category: 'vendor-vue', priority: 100, description: 'Vue 官方包' },
+  
+  // 状态管理
+  { match: 'pinia', category: 'vendor-vue', priority: 100, description: 'Pinia 状态管理' },
+  { match: 'vuex', category: 'vendor-state', priority: 90, description: 'Vuex 状态管理' },
+  
+  // 路由
+  { match: 'vue-router', category: 'vendor-router', priority: 100, description: 'Vue Router' },
+  
+  // UI 框架
+  { match: 'element-plus', category: 'vendor-element', priority: 80, description: 'Element Plus UI' },
+  { match: 'ant-design-vue', category: 'vendor-ui', priority: 80, description: 'Ant Design Vue' },
+  { match: 'naive-ui', category: 'vendor-ui', priority: 80, description: 'Naive UI' },
+  { match: 'vant', category: 'vendor-ui', priority: 80, description: 'Vant UI' },
+  { match: 'arco-design', category: 'vendor-ui', priority: 80, description: 'Arco Design' },
+  
+  // VueUse
+  { match: /^@vueuse\//, category: 'vendor-vueuse', priority: 70, description: 'VueUse 工具集' },
+  
+  // 国际化
+  { match: 'vue-i18n', category: 'vendor-i18n', priority: 60, description: 'Vue I18n' },
+  { match: /^@intlify\//, category: 'vendor-i18n', priority: 60, description: 'Intlify' },
+];
+
+/**
+ * React 生态规则
+ */
+export const reactRules: Rule[] = [
+  // React 核心
+  { match: 'react', category: 'vendor-react', priority: 100, description: 'React 核心' },
+  { match: 'react-dom', category: 'vendor-react', priority: 100, description: 'React DOM' },
+  
+  // 状态管理
+  { match: 'redux', category: 'vendor-state', priority: 90, description: 'Redux' },
+  { match: 'react-redux', category: 'vendor-state', priority: 90, description: 'React Redux' },
+  { match: 'zustand', category: 'vendor-state', priority: 90, description: 'Zustand' },
+  { match: 'mobx', category: 'vendor-state', priority: 90, description: 'MobX' },
+  { match: 'mobx-react', category: 'vendor-state', priority: 90, description: 'MobX React' },
+  
+  // 路由
+  { match: 'react-router', category: 'vendor-router', priority: 100, description: 'React Router' },
+  { match: 'react-router-dom', category: 'vendor-router', priority: 100, description: 'React Router DOM' },
+  
+  // UI 框架
+  { match: 'antd', category: 'vendor-ui', priority: 80, description: 'Ant Design' },
+  { match: '@ant-design/icons', category: 'vendor-icons', priority: 70, description: 'Ant Design Icons' },
+  { match: '@mui/material', category: 'vendor-ui', priority: 80, description: 'Material UI' },
+  { match: 'chakra-ui', category: 'vendor-ui', priority: 80, description: 'Chakra UI' },
+];
+
+/**
+ * Angular 生态规则
+ */
+export const angularRules: Rule[] = [
+  { match: /^@angular\//, category: 'vendor-angular', priority: 100, description: 'Angular 框架' },
+];
+
+/**
+ * Svelte 生态规则
+ */
+export const svelteRules: Rule[] = [
+  { match: 'svelte', category: 'vendor-svelte', priority: 100, description: 'Svelte 框架' },
+];
+
+/**
+ * 获取框架规则
+ */
+export function getFrameworkRules(framework: string): Rule[] {
+  switch (framework) {
+    case 'vue':
+      return vueRules;
+    case 'react':
+      return reactRules;
+    case 'angular':
+      return angularRules;
+    case 'svelte':
+      return svelteRules;
+    default:
+      return [...vueRules, ...reactRules, ...angularRules, ...svelteRules];
+  }
+}
+

package/src/build/chunk-optimizer/rules/index.ts

@@ -0,0 +1,27 @@
+/**
+ * 规则导出
+ */
+import type { Rule, Framework } from '../types';
+import { getFrameworkRules } from './framework-rules';
+import { getCommonRules } from './common-rules';
+
+/**
+ * 获取所有规则
+ */
+export function getAllRules(framework: Framework = 'auto'): Rule[] {
+  const frameworkRules = getFrameworkRules(framework === 'auto' ? 'all' : framework);
+  const commonRules = getCommonRules();
+  
+  return [...frameworkRules, ...commonRules];
+}
+
+/**
+ * 根据优先级排序规则
+ */
+export function sortRulesByPriority(rules: Rule[]): Rule[] {
+  return rules.sort((a, b) => (b.priority || 0) - (a.priority || 0));
+}
+
+export { getFrameworkRules } from './framework-rules';
+export { getCommonRules } from './common-rules';
+

package/src/build/chunk-optimizer/test.ts

@@ -0,0 +1,94 @@
+/**
+ * Chunk Optimizer 测试脚本
+ * 运行: npx tsx build/chunk-optimizer/test.ts
+ */
+
+import { createChunkOptimizer } from './index';
+
+console.log('\n' + '='.repeat(70));
+console.log('🧪 Testing Chunk Optimizer');
+console.log('='.repeat(70) + '\n');
+
+// 创建优化器实例
+const optimizer = createChunkOptimizer({
+  framework: 'vue',
+  debug: true,
+  customRules: {
+    // 测试自定义规则
+    'test-lib': 'vendor-test',
+  },
+  exclude: ['@types/*'],
+});
+
+// 打印分析报告
+optimizer.printReport();
+
+// 获取分析结果
+const result = optimizer.analyze();
+
+console.log('\n' + '='.repeat(70));
+console.log('📊 Detailed Analysis');
+console.log('='.repeat(70) + '\n');
+
+console.log(`Framework: ${result.detectedFramework}`);
+console.log(`Total Dependencies: ${result.dependencies.length}`);
+console.log(`Production Dependencies: ${result.dependencies.filter(d => !d.isDev).length}`);
+console.log(`Dev Dependencies: ${result.dependencies.filter(d => d.isDev).length}`);
+
+console.log('\n📦 Top 10 Dependencies by Category:\n');
+
+// 按分类分组
+const grouped = result.dependencies.reduce((acc, dep) => {
+  if (dep.category) {
+    if (!acc[dep.category]) {
+      acc[dep.category] = [];
+    }
+    acc[dep.category].push(dep.name);
+  }
+  return acc;
+}, {} as Record<string, string[]>);
+
+// 打印每个分类的前几个包
+Object.entries(grouped)
+  .sort(([, a], [, b]) => b.length - a.length)
+  .slice(0, 10)
+  .forEach(([category, packages]) => {
+    console.log(`${category}:`);
+    packages.slice(0, 5).forEach(pkg => {
+      console.log(`  - ${pkg}`);
+    });
+    if (packages.length > 5) {
+      console.log(`  ... and ${packages.length - 5} more`);
+    }
+    console.log('');
+  });
+
+// 生成 manualChunks 函数
+const manualChunks = optimizer.generate();
+
+console.log('='.repeat(70));
+console.log('✅ Test completed successfully!');
+console.log('='.repeat(70) + '\n');
+
+// 测试 manualChunks 函数
+console.log('🧪 Testing manualChunks function:\n');
+
+const testCases = [
+  'node_modules/vue/dist/vue.js',
+  'node_modules/element-plus/es/index.js',
+  'node_modules/axios/index.js',
+  'node_modules/@iconify/vue/dist/index.js',
+  '/src/views/system/user/index.vue',
+  '/src/views/dashboard/index.vue',
+  '/src/components/Button/index.vue',
+  '/src/utils/request.ts',
+  '/src/store/user.ts',
+];
+
+testCases.forEach(testCase => {
+  const result = manualChunks(testCase, { getModuleInfo: () => null });
+  console.log(`${testCase.padEnd(50)} -> ${result || '(default)'}`);
+});
+
+console.log('\n' + '='.repeat(70) + '\n');
+

package/src/build/chunk-optimizer/types.ts

@@ -0,0 +1,128 @@
+/**
+ * Chunk Optimizer 类型定义
+ */
+
+/**
+ * 框架类型
+ */
+export type Framework = 'vue' | 'react' | 'angular' | 'svelte' | 'auto';
+
+/**
+ * 分包策略
+ */
+export type Strategy = 'balanced' | 'aggressive' | 'conservative';
+
+/**
+ * 依赖分类
+ */
+export type DependencyCategory =
+  | 'vendor-vue'
+  | 'vendor-react'
+  | 'vendor-router'
+  | 'vendor-state'
+  | 'vendor-element'
+  | 'vendor-ui'
+  | 'vendor-utils'
+  | 'vendor-icons'
+  | 'vendor-i18n'
+  | 'vendor-vueuse'
+  | 'vendor-pro'
+  | 'vendor-libs'
+  | string;
+
+/**
+ * 规则定义
+ */
+export interface Rule {
+  /** 包名或模式 */
+  match: string | RegExp;
+  /** 分类 */
+  category: DependencyCategory;
+  /** 优先级（数字越大优先级越高） */
+  priority?: number;
+  /** 描述 */
+  description?: string;
+}
+
+/**
+ * 业务代码分包策略
+ */
+export interface SourceCodeStrategy {
+  /** 是否按 views 模块分包 */
+  views?: boolean;
+  /** 是否将公共组件单独分包 */
+  components?: boolean;
+  /** 是否将工具函数分包 */
+  utils?: boolean;
+  /** 是否将 store 分包 */
+  store?: boolean;
+  /** 自定义业务代码分包规则 */
+  custom?: Array<{
+    pattern: RegExp;
+    chunkName: string;
+  }>;
+}
+
+/**
+ * 优化器配置选项
+ */
+export interface ChunkOptimizerOptions {
+  /** 框架类型，默认 'auto' 自动检测 */
+  framework?: Framework;
+  
+  /** 分包策略，默认 'balanced' */
+  strategy?: Strategy;
+  
+  /** 自定义规则（会覆盖默认规则） */
+  customRules?: Record<string, DependencyCategory>;
+  
+  /** 排除某些包不参与分包 */
+  exclude?: string[];
+  
+  /** 最小 chunk 大小（KB），小于此大小的包会合并，默认 0 */
+  minChunkSize?: number;
+  
+  /** 是否启用调试模式，会输出详细的分包信息 */
+  debug?: boolean;
+  
+  /** 业务代码分包策略 */
+  sourceCodeStrategy?: SourceCodeStrategy;
+  
+  /** package.json 路径，默认为项目根目录 */
+  packageJsonPath?: string;
+}
+
+/**
+ * 依赖信息
+ */
+export interface DependencyInfo {
+  /** 包名 */
+  name: string;
+  /** 版本 */
+  version: string;
+  /** 是否为开发依赖 */
+  isDev: boolean;
+  /** 分类 */
+  category?: DependencyCategory;
+}
+
+/**
+ * 分析结果
+ */
+export interface AnalysisResult {
+  /** 所有依赖 */
+  dependencies: DependencyInfo[];
+  /** 检测到的框架 */
+  detectedFramework?: Framework;
+  /** 分类统计 */
+  categoryStats: Record<DependencyCategory, number>;
+}
+
+/**
+ * ManualChunks 函数类型
+ */
+export type ManualChunksFunction = (
+  id: string,
+  { getModuleInfo }: { getModuleInfo: (id: string) => any }
+) => string | undefined;
+

package/src/color/index.ts

@@ -0,0 +1,58 @@
+/**
+ * 颜色处理相关
+ * @packageDocumentation
+ * @module Color
+ * @preferred
+ */
+
+/**
+ * 将 Hex 颜色转换为 RGB 数组
+ * @param hex - Hex 格式颜色值（如 #ffffff）
+ * @returns RGB 数组 [r, g, b]
+ */
+export function hexToRgb(hex: string): number[] {
+  const result = hex.replace('#', '').match(/../g);
+  return result ? result.map(val => parseInt(val, 16)) : [0, 0, 0];
+}
+
+/**
+ * 将 RGB 值转换为 Hex 颜色
+ * @param r - 红色值 (0-255)
+ * @param g - 绿色值 (0-255)
+ * @param b - 蓝色值 (0-255)
+ * @returns Hex 格式颜色值（如 #ffffff）
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (n: number) => {
+    const hex = n.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * 颜色加深
+ * 使用 RGB 线性计算：color * (1 - level)
+ * @param color - Hex 格式颜色值
+ * @param level - 加深程度 (0-1)
+ * @returns 加深后的 Hex 颜色值
+ */
+export function darken(color: string, level: number): string {
+  const rgb = hexToRgb(color);
+  const darkened = rgb.map(val => Math.floor(val * (1 - level)));
+  return rgbToHex(darkened[0], darkened[1], darkened[2]);
+}
+
+/**
+ * 颜色变浅
+ * 使用 RGB 线性计算：(255 - color) * level + color
+ * @param color - Hex 格式颜色值
+ * @param level - 变浅程度 (0-1)
+ * @returns 变浅后的 Hex 颜色值
+ */
+export function lighten(color: string, level: number): string {
+  const rgb = hexToRgb(color);
+  const lightened = rgb.map(val => Math.floor((255 - val) * level + val));
+  return rgbToHex(lightened[0], lightened[1], lightened[2]);
+}
+