Browser caching for module files

[steel tusk]

I'm serving my JS files and consuming then in PHP files in the following structure:

raiz/tt_agenda/dialogs/dlg_agendamento.php
raiz/tt_agenda/dialogs/dlg_agendamento.js

My applications are static PHP files with HTML in them. No framework behind. To prevent cache I'm currently appending random numbers in the JS script tag as a query like this:

<script src="dlg_agendamento.js?<?=uniqid()?>" />

Recently I started creating and using modular files to import and export some functions. The functions I export are located in:

raiz/lib/js/ttrust/modules

I'm importing them in multiple files in this directory

raiz/

(such as my dlg_agendamento)

With that in mind, I'm currently facing some cache issues with my module files that export functions, they don't have the random string attached to invalidate the cache.

I saw online that Webpack could resolve this issue, but with that specific structure of directories I'm not sure if Webpack is the right approach. How I should handle it?

[feral jackal]

fix your site so the JS can be cached... why do you require users to download a new copy every single time the page is loaded?

[steel tusk]

I could enable cache, but every time I push new adjustments the end-user aren't receiving it

[feral jackal]

yes webpack and other bundlers solve this by just making the scripts have a unique name every time they're "built".

[steel tusk]

I would have to build each application JS file (dlg_agendamento.js) or should I bundle my files from my modules folder? Should I do both?

[feral jackal]

probably both. if you use ESM, you can import with a query string to use your current cache busting technique.

[steel tusk]

I thought about that, but if I need to correct every time the import path I think it kinda misses the point.

I will look more in to that, making bundles seems really good so it's a win win.

Thx for the help!