Can browser caching be controlled by HTTP headers alone w/o 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

When user agent opens a page it must always get correct version of a source code. You have two options to achieve this:

• Set Cache-Control, Expires and strong validator (ETag) response headers . This way you instruct user agent to perform relatively lightweight conditional request on each page load
• Embed version in source code file URL and set Cache-Control and Expires response headers. This way you instruct user agent to cache source code with particural version forever

For more information check HTTP Caching article by Ilya Grigorik, HTTP conditional requests MDN page and this StackOverflow answer about resource revalidation.