The problem with doing that is it will force the browser to always download a copy of those files on every page request which somewhat defeats the purpose of caching. Instead I’ll show here how to make the filename unique based on the last time it was modified, and without having to use query strings or rename the file thanks to a little bit of .htaccess magic.
This will result in filenames in the HTML code like this:
Now we need some rewrite rules in an .htaccess file to rewrite the time stamped version of the filenames to the actual filenames:
RewriteEngine On RewriteRule ^css/main.[0-9]+.css /css/main.css [L] RewriteRule ^js/common.[0-9]+.js /js/common.js [L]
Now a request for css/main.[numbers].css will actually result in css/main.css being served.
RewriteEngine On RewriteRule ^css/(.*).[0-9]+.css /css/$1.css [L] RewriteRule ^js/(.*).[0-9]+.js /js/$1.js [L]
And finally, both could be combined into a single rule:
RewriteEngine On RewriteRule ^(css|js)/(.*).[0-9]+.(.*)$ /$1/$2.$3 [L]
Now you can simply add any additional directory prefix into the first backeted part to apply the rules to those too.