TechTrends Now - Tech News for Builders and Operators

TL;DR

White screen	✅ A plugin show progress
	vite-plugin-white-screen-progress

Background and Motivation

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.

Usage

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(),
  ]
}

Minimal code implementation

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...<br>
            InitiatorType: ${entry.initiatorType} <br>
            StartTime: ${entry.startTime.toFixed(2)}ms <br>
            Duration: ${entry.duration.toFixed(2)}ms <br>
            TransferSize: ${entry.transferSize} 字节 <br>
            Name：${entry.name}  <br>
        `;
      // }
    });
  });
  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);
  });
}

Vite plugin implementation

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 <head> 
        transformIndexHtml(html) {
            return {
                html,
                order: 'pre',
                tags: [
                    {
                        tag: 'script',
                        injectTo: 'head-prepend',
                        attrs: {
                            type: 'module'
                        },
                        children: getClientScript()
                    }
                ]
            };
        }
    };
}

Plugin config custom style support

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 <head> 
        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'
                        })
                    }
                ]
            };
        }
    };
}

Vite Cold Start White Screen? A Plugin Shows Resource Loading on Page

TL;DR

Background and Motivation

Usage

Minimal code implementation

Vite plugin implementation

Plugin config custom style support

Comments (0)

United States

Related News

What Does "Building in Public" Actually Mean in 2026?

The Agentic Headless Backend: What Vibe Coders Still Need After the UI Is Done

Why I’m Still Learning to Code Even With AI

I gave Claude a persistent memory for $0/month using Cloudflare

NYT: 'Meta's Embrace of AI Is Making Its Employees Miserable'