1

I'm working with the webcomponents standard, but in reality, the same thing happens with any import of es6 modules.

When I update a web component and upload it to the server, since these are imported with es6 modules, users do not see the update until they force to refresh the browser's cache.

This is a problem when it is a hotfix or when the update requires a component that the user already has in cache, but this component has had some update in the code necessary for the operation of the new component.

I've been looking, but haven't found anything that really works for me to force the browser to request the javascript modules from the server. Not even by uncaching the .htaccess, the browser keeps caching a copy and serving it from the cache itself.

I used to use the trick of putting the version in the src attribute of the script tag.

<script src="https://example.com/src/js/myscriptfile.js?v=1.1.2"></script>

But when importing with an import statement inside the javascript file this is no longer an option.

Any ideas that work?

Manu Overa
  • 31
  • 4
  • I hope this question could give you more information https://stackoverflow.com/questions/47675549/how-do-i-cache-bust-imported-modules-in-es6 – Raden Kriting Jul 05 '21 at 16:52

1 Answers1

1

I used the following import statement for a file that is transpiled by Babel & minified by Webpack, and it is also served directly as a <script type="module"....
This technique causes Chrome v102 to download the file each time the "v" value changes (i.e., cache the imported file until I change tye hard-coded URL query parameter that I used in the import statement), which I change when I update the file so that the new file will be downloaded by the browser.

import { myFunction } from './myFile.js?v=2022-06-17T12.48';

NOTE: There is a chain reaction, so you'll need to do the same thing for any files that are imported from within myFile.js, assuming you want to control the caching of those files also.

Abel Wenning
  • 483
  • 8
  • 6