How to properly configure caching for the browser by the server?

Question

Browsers

I checked the site through google speed, it constantly swears that the caching time by my server is set to 60 minutes, and it should supposedly be 1 year. And here the question arises, if I set caching for 1 year, then provided that I change jQuery from the second version to the third, but the file name included in index.html remains jquery.min.js, then the browser will take from the cache the old file of the second version and then my updates will break for the user.
What do they do in this case? After all, I really can’t generate a hash for each file in the file.[hash].ext project, because for example, some js files import js files asynchronously inside themselves and they rely on a static file name.
Please tell me what to do in this case?

Answer 1

Enter the version in the filename.
Note that in jQuery CDN, for example, all filenames contain the version. And they have caching for ten years. By the way, you can use a CDN - firstly, this takes care of caching from you, and secondly, it potentially speeds up loading for the client, because. he might still have the jquery cache from the CDN thanks to another site.
With local scripts, you can do this: in the application, store a global "script version", which increases with each commit (or release), and load all local scripts from addresses like script.js?version=xxx. When importing, pass version.
PS: I'm not a frontend expert.