Tackling Vite Dev Server White Screen Delays
As Vue applications grow in complexity and the number of components increases, developers often face prolonged white screen times with Vite's dev server, particularly during initial loads. Traditionally, developers monitor resource loading via Chrome DevTools, but this can be cumbersome and time-consuming.
Introducing the Solution: vite-plugin-white-screen-progress
To address this challenge, a new plugin, vite-plugin-white-screen-progress, offers a streamlined approach by displaying the Vite dev server's resource loading progress directly on the page. This eliminates the need to constantly access DevTools and provides immediate feedback.
How to Implement the Plugin
Installation
To get started, install the plugin using npm:
npm install vite-plugin-white-screen-progress@latest --save-dev --save-exact
Configuration
Next, modify your vite.config.js to enable the plugin during the development phase:
import devServerWhiteScreenProgress from 'vite-plugin-white-screen-progress';
export default {
// ...
plugins: [
devServerWhiteScreenProgress(),
]
}
Minimal Code Implementation
The plugin utilizes a PerformanceObserver to track resource loading. Here’s a basic implementation:
function showViteDevLoadProgress() {
const div = document.createElement("div");
div.setAttribute("id", "vite-dev-loading");
div.style.fontSize = "14px";
document.body.appendChild(div);
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
div.innerHTML = `Vite resource loading...<br>InitiatorType: ${entry.initiatorType}<br>StartTime: ${entry.startTime.toFixed(2)}ms<br>Duration: ${entry.duration.toFixed(2)}ms<br>TransferSize: ${entry.transferSize} bytes<br>Name: ${entry.name}`;
});
});
observer.observe({ entryTypes: ["resource"] });
document.addEventListener("DOMContentLoaded", () => {
div.remove();
observer.disconnect();
});
}
Customizing Plugin Appearance
The plugin supports various styles to match your preferences:
- Fixed-Simple: A compact display for essential information.
- Fixed: Provides detailed information while remaining fixed on the right side.
- Normal: A flat, straightforward layout.
Modify the configuration to suit your needs:
export default function devServerWhiteScreenProgress(config = { theme: 'fixed-simple', style: '' }) {
const themeStyleConfig = {
'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;',
'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;',
'normal': 'font-size: 14px;background: #fff;color: #333; padding: 22px;border-radius: 8px;',
};
return {
name: 'vite-plugin-white-screen-progress',
apply: 'serve',
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',
}),
}],
};
},
};
}