Make it possible to use file hashes in query strings instead of file name

[rubjo]

Clear and concise description of the problem

In our environment, there's a specific whitelist for files permitted to be served. At the same time, I'd like to employ hashes to serve the most recent versions of the files.

I'd like to use hashes as query strings (eg. fileX.js?v=87654321) instead of part of the file name (fileX.87654321.js), as that won't necessitate an update of the whitelist.

Updating the config with eg. build.rollupOptions.output.assetFileNames to assets/[name].[ext]?v=[hash] will just literally append ?v=87654321 to the actual file name.

Suggested solution

Config option (maybe it already exists in some form)

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[bluwy]

I don't think ?v= would work in build due to how Rollup handles it. It may require a custom Rollup plugin to handle cases like that, but I'm not sure the extra complexity is worth having built into Vite. Hashes in filenames has been the convention for a while now, so I think the simplest way possible would still be to regenerate the whitelist.

[rubjo]

@bluwy Thanks for the input!

Absolutely agree with you, although what's frustrating is that one doesn't always have complete control over the deployment chain / environment policies.

Anyway, you're right that this is the domain of a custom plugin, and it was really quite easy to implement once I did a bit more research:

vite.config.js:

// Cache busting: append timestamp as hash
const htmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html) {
      const hash = Date.now()

      return html
        .replaceAll('.js', '.js?v=' + hash)
        .replaceAll('.css', '.css?v=' + hash)
    },
  }
}

...along with

export default defineConfig({
  plugins: [vue(), htmlPlugin()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]',
      },
    },
  },
})

[ryoji-sagara]

@rubjo Hi.

I faced the same problem and came up with the same implementation.
However, there was one more problem.
In my environment, for built external modules (e.g. component-b.js)
The external module (component-b.js) imported from index.js?v=xxxxx further imports index.js (without query string), so it refers to the old cached index.js.
Therefore, index.js with and without query string is loaded twice.

Example: In component-b.js

import{C as e,D as t,E as o}from"./index.js";

The following is a section.

import{C as e,D as t,E as o}from"./index.js?v=87654321";

If I don't do the above, it will refer to the old cached index.js.
I looked into the vite options but couldn't find a way to hook into it here.

Have you faced this kind of problem?

[rubjo]

Ah hm, no (or maybe I have actually faced it without realising it 😄). I'm not immediately sure what to do in that case.

[ryoji-sagara]

Understood.
I will comment again when I figure out the implementation.
Thanks for the reply.