Why

Vite does not offer an inbuilt solution to add cache busting params to the generated build assets. (https://github.com/vitejs/vite/issues/5825).

By default vite adds a hash to the file name for cache busting which can be problematic if you're deploying the assets to multiple servers in async and would like the old version of the asset to remain accessible.

This plugin extends manifest.json and adds a configurable query param to each file entry for each generated asset.

I built and tested this mostly for my own deployment use cases.

Installation & Usage

Install the package as a development dependency:

npm i -D vite-plugin-query-hash

Add it to your vite plugin list:

import { defineConfig } from 'vite'
import queryHash from 'vite-plugin-query-hash'

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

The build.manifest option must be enabled in order to generate a manifest.json file. This option is enabled by default in most configurations.

You must also disable default vite filename hashing via the build.rollupOptions configuration:

build: {
  rollupOptions: {
    output: {
      entryFileNames: `assets/[name].js`,
      chunkFileNames: `assets/[name].js`,
      assetFileNames: `assets/[name].[ext]`,
    },
  },
}

Configuration

The following options can be provided:

• queryParamName

  Name to use for the query param

  Default: v

  queryHash({ hashParamName: 'customParam' })

• queryParamValue

  Value to use for the query param value.

  Default: Date.now()

  queryHash({ hashParamValue: BUILD_VERSION })

• manifestPaths

  Manifest paths to use when adding the query param, relative to outDir. Use if you're outputting your manifests to a custom dir.

  Default: [ '.vite/manifest.json', '.vite/manifest-assets.json', 'manifest.json', 'manifest-assets.json', ]

  queryHash({ manifestPaths: ['custom/path/manifest.json', 'another/manifest.json'] })

Acknowledgements

Repo structure and idea based on vite-plugin-manifest-sri