5

we're reworking our whole assets building process to use 100% webpack. In the course of this I'd like to use its hash feature (e.g. [name].[chunkhash].js) to improve caching.

But my backend colleagues say no need and we should use ETags instead for the caching. So no hash at all in the filenames.

I like the idea but I'm wondering why do the bundler offer this hash feature if ETags can be used instead.

Does anyone have experience with ETags and knows the pro/cons? (we're using a custom PHP backend btw)

Kai
  • 51
  • 8

1 Answers1

1

Hashing filenames and using ETags serve different purposes.

When you use a hashed filename you are referencing a new, unique resource. The first time it is fetched it will be loaded from the server, and it can be cached forever. Importantly, your code won't break, since your HTML is pointing only to the specific, versioned asset that it relies upon.

ETags, by contrast, are used for conditional validation of an already-cached resource. They are used when a resource has exceeded its cache time and the browser wants to check if the current version is still valid. So the cache time will be finite, and the browser will be forced to check in with the server to see if the file has changed. More significantly, your site can break if you serve a page that relies on the new version of the asset while the old version of the asset is still cached.

So while ETags can be very useful, they are not a substitute for hashing filenames when it comes to static files.

Kevin Christopher Henry
  • 46,175
  • 7
  • 116
  • 102
  • Thanks Kevin for your answer! But at some parts I didn't understand you: – Kai Oct 08 '18 at 07:00
  • - you said with Etag the cache time is finite, but if the current version is always valid, wouldn't it be infinite too? - what do you mean with the browser is frequently forced to check with the server? what I expect is if I use unique filename the browser will check if the asset is in browser cache and if I use Etag the browser will check if the assets's Etag equals the ETag of the cached version. Is this thought wrong? – Kai Oct 08 '18 at 07:07
  • 1
    @Kai: "if I use Etag the browser will check if the assets's Etag equals the ETag of the cached version." How would the browser find out the asset's ETag? By checking with the server. That's not actually how this works, though; rather, the browser sends the ETag with the request and the server decides whether it matches or not. My suggestion is to read [RFC 7232](https://tools.ietf.org/html/rfc7232) to understand this. – Kevin Christopher Henry Oct 09 '18 at 21:19
  • 2
    ok, I see, checking the ETag is an additional request. But on the other hand using unique filename (e.g. main.1234.css) requires an injection into the template in the course of the assets build process what might also be a bad option if the assets build process is executed on the server (on deployment). So far I still don't know a reason why you should always prefer unique filenames over ETags. I think it depends on the individual environment – sth I've to discuss with the backend colleagues. But nevertheless thanks for your answers! – Kai Oct 16 '18 at 11:50