开发大型Vue项目时，Vite开发服务器的白屏时间会越来越长。组件越多，首次加载的等待就越煎熬。通常我们得打开Chrome开发者工具，切到Network标签才能看到进度。但很多时候，我们并不想频繁开关DevTools。

能不能直接把资源加载进度显示在页面上？我写了vite-plugin-white-screen-progress来解决这个问题。

打开网易新闻 查看精彩图片

安装很简单：

打开网易新闻 查看精彩图片

npm install vite-plugin-white-screen-progress@latest --save-dev --save-exact

然后在vite.config.js里启用。注意这个插件只在开发服务器（vite dev）时生效，打包构建（vite build）时会自动忽略：

// vite.config.js
import devServerWhiteScreenProgress from 'vite-plugin-white-screen-progress'

export default {
// ...
plugins: [
devServerWhiteScreenProgress(),
]
}

打开网易新闻 查看精彩图片

核心实现用了PerformanceObserver来监听资源加载。插件会在页面注入一段脚本，创建一个浮动div实时显示：加载的资源类型、开始时间、耗时、传输大小、资源URL。等DOMContentLoaded事件触发后，这个提示框自动消失，观察器断开。

插件源码结构很清晰：getClientScript()返回要注入的客户端脚本，apply: 'serve'确保只在开发模式生效，transformIndexHtml把脚本写入index.html的head标签。代码量极小，没有多余依赖。

GitHub仓库：vite-plugin-white-screen-progress

这个插件解决的是一个很具体的开发体验痛点——减少上下文切换。不用在浏览器和DevTools之间来回切，眼睛盯着页面就能看到加载到哪了。对于大型项目冷启动动辄几秒甚至十几秒的情况，这种即时反馈能缓解等待焦虑。