How do I cache bust imported modules in es6?

Question

ES6 modules allows us to create a single point of entry like so:

Answer 1

You can use ETags, as pointed out by a previous answer, or alternatively use Last-Modified in relation with If-Modified-Since.

Here is a possible scenario:

1. The browser first loads the resource. The server responds with Last-Modified: Sat, 28 Mar 2020 18:12:45 GMT and Cache-Control: max-age=60.
2. If the second time the request is initiated earlier than 60 seconds after the first one, the browser serves the file from cache and doesn't make an actual request to the server.
3. If a request is initiated after 60 seconds, the browser will consider cached file stale and send the request with If-Modified-Since: Sat, 28 Mar 2020 18:12:45 GMT header. The server will check this value and:
   • If the file was modified after said date, it will issue a 200 response with the new file in the body.
   • If the file was not modified after the date, the server will issue a304 "not modified" status with empty body.

I ended up with this set up for Apache server:

  
    Header set Cache-Control "public, must-revalidate, max-age=3600"
    Header unset ETag
  

You can set max-age to your liking.

We have to unset ETag. Otherwise Apache keeps responding with 200 OK every time (it's a bug). Besides, you won't need it if you use caching based on modification date.