ES6 modules allows us to create a single point of entry like so:
Just a thought at the moment but you should be able to get Webpack to put a content hash in all the split bundles and write that hash into your import statements for you. I believe it does the second by default.
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:
Last-Modified: Sat, 28 Mar 2020 18:12:45 GMT
and Cache-Control: max-age=60
.If-Modified-Since: Sat, 28 Mar 2020 18:12:45 GMT
header. The server will check this value and:
200
response with the new file in the body.304
"not modified" status with empty body.I ended up with this set up for Apache server:
<IfModule headers_module>
<FilesMatch "\.(js|mjs)$">
Header set Cache-Control "public, must-revalidate, max-age=3600"
Header unset ETag
</FilesMatch>
</IfModule>
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.
A solution that crossed my mind but I wont use because I don't like it LOL is
window.version = `1.0.0`;
let { default: fu } = await import( `./bar.js?v=${ window.version }` );
Using the import "method" allows you to pass in a template literal string. I also added it to window so that it can be easily accessible no matter how deep I'm importing js files. The reason I don't like it though is I have to use "await" which means it has to be wrapped in an async method.
There is one solution for all of this that doesn't involve query string. let's say your module files are in /modules/
. Use relative module resolution ./
or ../
when importing modules and then rewrite your paths in server side to include version number. Use something like /modules/x.x.x/
then rewrite path to /modules/
. Now you can just have global version number for modules by including your first module with
<script type="module" src="/modules/1.1.2/foo.mjs"></script>
Or if you can't rewrite paths, then just put files into folder /modules/version/
during development and rename version
folder to version number and update path in script tag when you publish.
From my point of view dynamic imports could be a solution here.
Step 1) Create a manifest file with gulp or webpack. There you have an mapping like this:
export default {
"/vendor/lib-a.mjs": "/vendor/lib-a-1234.mjs",
"/vendor/lib-b.mjs": "/vendor/lib-b-1234.mjs"
};
Step 2) Create a file function to resolve your paths
import manifest from './manifest.js';
const busted (file) => {
return manifest[file];
};
export default busted;
Step 3) Use dynamic import
import busted from '../busted.js';
import(busted('/vendor/lib-b.mjs'))
.then((module) => {
module.default();
});
I give it a short try in Chrome and it works. Handling relative paths is tricky part here.
Use of relative path works for me:
import foo from './foo';
or
import foo from './../modules/foo';
instead of
import foo from '/js/modules/foo';
EDIT
Since this answer is down voted, I update it. The module is not always reloaded. The first time, you have to reload the module manually and then the browser (at least Chrome) will "understand" the file is modified and then reload the file every time it is updated.