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

#vue #javascript #vite

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