Vite构建信息插件详解
这个自定义Vite插件用于在构建过程中显示友好的提示信息，包括欢迎消息和构建完成后的统计信息。下面我将详细解析这个插件的实现和工作原理。
插件功能概述
该插件主要有两个核心功能：
- 构建开始时：显示欢迎消息
- 构建完成后：显示构建时间和打包大小
插件实现解析
1. 导入依赖
import type { Plugin } from "vite";
import gradient from "gradient-string";
import { getPackageSize } from "./utils";
import dayjs, { type Dayjs } from "dayjs";
import duration from "dayjs/plugin/duration";
import boxen, { type Options as BoxenOptions } from "boxen";
dayjs.extend(duration);
- vite：Vite插件类型
- gradient-string：用于创建渐变色文本
- getPackageSize：自定义工具函数，计算打包后文件夹大小
- dayjs：轻量级日期处理库，扩展了duration插件用于时间差计算
- boxen：在终端创建带边框的文本框
2. 欢迎消息配置
const welcomeMessage = gradient(["cyan", "magenta"]).multiline(`您好! 欢迎使用文泽运维监控平台\nWelcome to the WIZ Operations Monitoring Platform`
);const boxenOptions: BoxenOptions = {padding: 0.5,borderColor: "cyan",borderStyle: "round"
};
- 使用渐变色（cyan到magenta）创建多行欢迎消息
- 配置文本框选项：内边距0.5、青色边框、圆角样式
3. 插件主体结构
export function viteBuildInfo(): Plugin {let config: { command: string };let startTime: Dayjs;let endTime: Dayjs;let outDir: string;return {name: "vite:buildInfo",// ...插件钩子函数};
}
插件使用闭包保存以下状态：
config：Vite配置信息startTime/endTime：构建开始/结束时间outDir：构建输出目录
4. 插件钩子详解
(1) configResolved 钩子
configResolved(resolvedConfig) {config = resolvedConfig;outDir = resolvedConfig.build?.outDir ?? "dist";
}
- 在Vite配置解析完成后调用
- 保存解析后的配置信息
- 获取输出目录（默认为"dist"）
(2) buildStart 钩子
buildStart() {console.log(boxen(welcomeMessage, boxenOptions));if (config.command === "build") {startTime = dayjs();}
}
- 构建开始时调用
- 打印带边框的欢迎消息
- 如果是构建命令（非开发模式），记录开始时间
(3) closeBundle 钩子
closeBundle() {if (config.command === "build") {endTime = dayjs();return new Promise((resolve) => {getPackageSize({folder: outDir,callback: (size: string) => {const buildTime = dayjs.duration(endTime.diff(startTime)).format("mm分ss秒");const message = gradient(["cyan", "magenta"]).multiline(`🎉 恭喜打包完成（总用时${buildTime}，打包后的大小为${size}）`);console.log(boxen(message, boxenOptions));resolve();}});});}
}
- 构建完成后调用
- 记录结束时间
- 返回Promise确保等待异步操作完成
- 调用
getPackageSize计算打包大小 - 构建完成消息包含：
- 构建时间（分钟和秒）
- 打包后大小
- 同样应用渐变色和边框样式
- 调用
resolve()标记异步操作完成
插件工作流程
关键设计考虑
- 异步处理：通过返回Promise确保Vite等待打包大小计算完成
- 条件执行：只在
build命令下记录时间和显示统计信息 - 用户体验：
- 使用渐变色提升视觉吸引力
- 边框美化输出内容
- 包含emoji表情增加趣味性
- 国际化：同时包含中英文欢迎语
- 时间格式：使用易读的"分秒"格式显示构建时间
使用场景
这个插件特别适合：
- 企业级项目构建流程
- 需要提升开发者体验的场景
- 展示关键构建指标（时间、大小）
- 添加品牌标识（如"文泽运维监控平台"）
效果
总结
这个Vite插件通过优雅地利用Vite的插件钩子机制，在构建过程的关键节点添加了友好的提示信息。它不仅提升了开发体验，还提供了有价值的构建指标，帮助开发者快速了解构建结果。插件设计考虑了异步操作处理、条件执行和视觉优化，是一个实用且可扩展的Vite插件示例。
