Can browser caching be controlled by HTTP headers alone without using hash names for asset files?

Question

I'm reading it in Webpack docs:

The way it works has a pitfall: if we don’t change filenames of our resources when deploying a new version, browser might think it hasn’t been updated and client will get a cached version of it.

I'm curious, is it mandatory to use this mechanism with ugly file names main.55e783391098c2496a8f.js for assets in order to inform a browser that an asset file has changed?

Can it be controlled by HTTP headers only? There are multiple HTTP headers in the standard to control how browser caches assets, like:

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
Date: Wed, 24 Aug 2020 18:32:02 GMT
Last-Modified: Tue, 15 Nov 2024 12:45:26 GMT
ETag: x234dff
max-age: 12345

So can I use those headers alone? Or do I still have to bother about hash parts in file names main.55e783391098c2496a8f.js?

Answer 1

Yes, you can tell the browser not to cache anything, but then your site will be slower because visitors have to re-download the assets on every page load.

The files you refer to are auto-generated so I don't see any reason you would be "bothered" by them, they're just file names that neither you or your visitors need to deal with.

If it's really a problem for you, a happy medium could be to keep the "nice" name, and have a short expiration of a day or two. So various page loads within a session would not cause the files to be re-downloaded, but if they come back in a few days they will definitely get the latest version.

Answer 2

You really don't need to use hashname in your assets(js or css), browser will know about the file modification from your ETAG.

Might this answer will also help you.

Answer 3

Well, if you tell it never to cache then nothing will ever be cached. So you need to change the file name but it doesn't have to be as ugly as you show. For some clients, I add the date of the change like: main-01012017.js