vite-plugin-reload-on-rebuild

npm install vite-plugin-reload-on-rebuild --save-dev

vite-plugin-reload-on-rebuild plugin adds reload-on-rebuild.js script on the page which polls window.location.href and reloads the page if etag or last-modified headers are changed.

Production (build) mode only

Usage

Add vite-plugin-reload-on-rebuild plugin to your project:

npm install vite-plugin-reload-on-rebuild --save-dev

Use it as a vite plugin:

// vite.config.js
import { defineConfig } from "vite";
import { reloadOnRebuild } from "vite-plugin-reload-on-rebuild";

export default defineConfig({
  plugins: [reloadOnRebuild()],
});

Run vite build in watch mode and start the preview server:

# 1st terminal
npx vite build -w
# 2nd terminal
npx vite preview

Change the source code and see how your page reloads 🚀

Options

interface ReloadOnRebuildOptions {
  /**
   * Is plugin enabled
   * @default true
   */
  enabled?: boolean;
  /**
   * Should plugin work only in "watch" mode (detect "vite build --watch") or "always"
   * @default "watch"
   */
  mode?: "watch" | "always";
  /**
   * Filename for emitted asset script
   * @default "reload-on-rebuild.js"
   */
  fileName?: string;
  /**
   * Poll interval (ms)
   * @default 3000
   */
  interval?: number;
  /**
   * List of headers that should be checked
   * @default - ["etag", "last-modified"]
   */
  headers?: string[];
}