@frameui/fui-plugin-vitebar

v2.1.0

Published

4 months ago

一个功能强大的 Vite 构建进度条插件，提供实时进度显示、性能监控和智能缓存管理

0High
0Medium
0Low

liuzhaolei

frameui01

fui-plugin-vitebar vite plugin progress-bar build caching performance monitoring frameui

Fui Plugin Vitebar 2.0

一个功能强大的 Vite 构建进度条插件，提供实时进度显示、性能监控和智能缓存管理。

✨ 特性

🚀 实时进度条 - 显示构建转换和块处理的实时进度
📊 性能监控 - 监控构建各阶段的性能指标
💾 智能缓存 - 自动缓存构建数据，提升重复构建速度
🎨 美观界面 - 彩色进度条和状态指示器
🔧 灵活配置 - 丰富的配置选项和自定义功能
🛡️ 错误处理 - 完善的错误处理和日志记录
📱 环境适配 - 自动检测环境并优化显示

📦 安装

npm install @frameui/fui-plugin-vitebar
# 或
yarn add @frameui/fui-plugin-vitebar
# 或
pnpm add @frameui/fui-plugin-vitebar

🚀 使用方法

基本用法

// vite.config.ts
import { defineConfig } from 'vite'
import viteProgressBar from '@frameui/fui-plugin-vitebar'

export default defineConfig({
  plugins: [
    viteProgressBar()
  ]
})

高级配置

// vite.config.ts
import { defineConfig } from 'vite'
import viteProgressBar from '@frameui/fui-plugin-vitebar'

export default defineConfig({
  plugins: [
    viteProgressBar({
      // 进度条配置
      width: 50,
      complete: '█',
      incomplete: '░',
      projectName: 'My Awesome Project',
      
      // 性能监控
      enablePerformanceMonitoring: true,
      showDetailedStats: true,
      
      // 缓存配置
      cacheTTL: 24 * 60 * 60 * 1000, // 24小时
      clearCacheAfterBuild: false,
      
      // 源代码目录
      srcDir: 'src',
      
      // 自定义格式
      format: '⚡ :projectName Building :bar :percent | :elapseds'
    })
  ]
})

⚙️ 配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | width | number | 40 | 进度条宽度 | | complete | string | █ | 完成字符 | | incomplete | string | ░ | 未完成字符 | | projectName | string | 'Frameui Plus' | 项目名称 | | stream | NodeJS.WriteStream | process.stderr | 输出流 | | total | number | 100 | 总进度 | | format | string | '' | 自定义格式 | | srcDir | string | 'src' | 源代码目录 | | enablePerformanceMonitoring | boolean | false | 启用性能监控 | | showDetailedStats | boolean | false | 显示详细统计 | | cacheTTL | number | 86400000 | 缓存过期时间（毫秒） | | clearCacheAfterBuild | boolean | false | 构建后清除缓存 |

🎯 进度条格式

进度条支持以下占位符：

:bar - 进度条
:percent - 百分比
:elapseds - 已用时间
:transformCur - 当前转换数
:transformTotal - 转换总数
:chunkCur - 当前块数
:chunkTotal - 块总数

📊 性能监控

启用性能监控后，插件会收集以下指标：

转换阶段耗时
块处理阶段耗时
总构建耗时
平均转换速度（文件/秒）
平均块处理速度（块/秒）

viteProgressBar({
  enablePerformanceMonitoring: true,
  showDetailedStats: true
})

💾 缓存管理

插件自动管理构建缓存，提升重复构建性能：

import { cacheManager } from '@frameui/fui-plugin-vitebar'

// 获取缓存统计
const stats = cacheManager.getCacheStats()
console.log('缓存大小:', stats.size, '字节')
console.log('最后修改:', stats.lastModified)
console.log('是否有效:', stats.isValid)

// 清除缓存
cacheManager.clearCache()

// 刷新缓存
cacheManager.refreshCache()

🛠️ 工具类

配置验证器

import { ConfigValidator } from '@frameui/fui-plugin-vitebar'

const validation = ConfigValidator.validateOptions({
  width: 50,
  projectName: 'My Project'
})

if (!validation.isValid) {
  console.error('配置错误:', validation.errors)
}

环境检测器

import { EnvironmentDetector } from '@frameui/fui-plugin-vitebar'

console.log('操作系统:', EnvironmentDetector.getOS())
console.log('Node.js 版本:', EnvironmentDetector.getNodeVersion())
console.log('是否支持彩色:', EnvironmentDetector.supportsColors())

版本检查器

import { VersionChecker } from '@frameui/fui-plugin-vitebar'

const check = VersionChecker.checkViteVersion('5.0.0')
console.log(check.message) // "Vite 版本 5.0.0 兼容"

const info = VersionChecker.getPluginInfo()
console.log('插件信息:', info)

🔧 开发

构建

npm run build

开发模式

npm run dev

类型检查

npm run type-check

📝 更新日志

2.0.9

✨ 新增性能监控功能
✨ 新增配置验证器
✨ 新增环境检测器
✨ 新增版本兼容性检查
✨ 新增智能缓存管理
✨ 新增详细日志系统
🐛 修复进度条显示问题
🐛 修复缓存数据处理逻辑
🚀 优化构建性能
📚 完善类型定义

2.0.0

🎉 重构为模块化架构
✨ 新增延迟初始化
✨ 新增错误处理
✨ 新增缓存管理
📚 完善 TypeScript 支持