Vite 进度跟踪插件

一个 Vite 插件，在开发过程中显示进度条，展示模块处理和资源加载状态。

安装npm install vite-progress-tracking-plugin --save-dev

或

yarn add vite-progress-tracking-plugin --dev

使用方法

在你的 vite.config.ts 中：import { defineConfig } from 'vite'; import { progressTrackingPlugin } from 'vite-progress-tracking-plugin';

export default defineConfig({ plugins: [ progressTrackingPlugin({ // 可选配置 color: '#42b983', // 进度条颜色 height: 4, // 进度条高度（像素） showStatus: true // 是否显示状态文本 }) ] });

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|---------|------| | color | string | '#646cff' | 进度条颜色（任何有效的 CSS 颜色值） | | height | number | 3 | 进度条高度（像素） | | showStatus | boolean | true | 是否在角落显示状态文本 |

工作原理

该插件在开发过程中跟踪两种类型的进度：

1. 服务端编译：跟踪 Vite 正在处理的模块数量
2. 客户端资源加载：监控脚本、样式和其他资源的加载情况

进度条结合这两个指标来显示整体加载进度，并为流程的每个阶段赋予适当的权重。

许可证

MIT