TL;DR White screen ✅ A plugin show progress vite-plugin-white-screen-progress In daily Vue app development, as the project become more and more complex and the number of components grows, the white screen time of the Vite dev server gradually lengthens, especially during the first load. Usually, we need to open Chrome DevTools and go to the Nework tab to see the loading progress. But some times, we don't want to open DevTools. Is there a way to show the loading progress of Vite dev server resources directly on the page? So I wrote a plugin to resolve this problem. Install vite-plugin-white-screen-progress npm install vite-plugin-white-screen-progress@latest --save-dev --save-exact Edit vite.config.js, the plugin is enabled only in the dev server（vite dev）and ignored during vite build // vite.config.js import devServerWhiteScreenProgress from 'vite-plugin-white-screen-progress' export default { // ... plugins: [ devServerWhiteScreenProgress(), ] } Use PerformanceObserver observe resource loading showViteDevLoadProgress(); function showViteDevLoadProgress() { const div = document.createElement("div"); div.setAttribute("id", "vite-dev-loading"); div.setAttribute("style", "font-size: 14px;"); document.body.appendChild(div); const observer = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { // if (entry.initiatorType === 'script' || entry.name.endsWith('.js')) { div.innerHTML = ` Vite resource loading... InitiatorType: ${entry.initiatorType} StartTime: ${entry.startTime.toFixed(2)}ms Duration: ${entry.duration.toFixed(2)}ms TransferSize: ${entry.transferSize} 字节 Name：${entry.name} `; // } }); }); observer.observe({ entryTypes: ["resource"] }); function domContentLoadedCb(event) { const el = document.querySelector("#vite-dev-loading"); if (el) el.remove(); observer.disconnect(); } document.addEventListener("DOMContentLoaded", domContentLoadedCb); window.addEventListener("beforeunload", function (event) { window.removeEventListener("DOMContentLoaded", domContentLoadedCb); }); } source code vite-plugin-white-screen-progress - github function getClientScript() { // PerformanceObserver observe resource loading js return 'some script' } export default function devServerWhiteScreenProgress() { return { name: 'vite-plugin-white-screen-progress', apply: 'serve', // just enabled in dev server（vite dev），ignore when vite build // write custom script into index.html transformIndexHtml(html) { return { html, order: 'pre', tags: [ { tag: 'script', injectTo: 'head-prepend', attrs: { type: 'module' }, children: getClientScript() } ] }; } }; } export default function devServerWhiteScreenProgress(config = { theme: 'fixed-simple', style: '', }) { const themeStyleConfig = { // Default style fix in right, simple info 'fixed-simple': 'font-size: 12px;background: rgba(0, 0, 0, .8);color: white; padding: 16px;border-radius: 8px;position:fixed;top: 200px;z-index: 1000000;right: 9px;width:150px;height: auto;overflow:hidden;word-break:break-all;', // fix in right, more info 'fixed': 'font-size: 12px;background: rgba(0, 0, 0, .8);color: white; padding: 22px;border-radius: 8px;position:fixed;top: 200px;z-index: 1000000;right: 9px;width:300px;height: auto;overflow:hidden;word-break:break-all;', // Display in a flat layout on the page 'normal': 'font-size: 14px;background: #fff;color: #333; padding: 22px;border-radius: 8px;', } // console.log('themeStyleConfig[config?.theme]', themeStyleConfig[config?.theme]) return { name: 'vite-plugin-white-screen-progress', apply: 'serve', // just enabled in dev server（vite dev），ignore when vite build // write custom script into index.html transformIndexHtml(html) { return { html, order: 'pre', tags: [ { tag: 'script', injectTo: 'head-prepend', attrs: { type: 'module' }, children: getClientScript({ themeStyle: config?.style || themeStyleConfig[config?.theme] || themeStyleConfig['fixed-simple'], theme: config?.theme || 'fixed-simple' }) } ] }; } }; }