1

I've a html file with bunch of css/js links. How can I version these static resources. Versioning can be file name versioning or adding as a query parameter . I'm not using any server side template, I've html file with js/css links. I don't want to append query param manually in links. Any help will be appreciated.

//in html
  <link rel="stylesheet" href="test1.css">
  <link rel="stylesheet" href="test2.css">
  <link rel="stylesheet" href="test3.css">
  <script src="myscripts.js"></script>
  <script src="myscripts1.js"></script>
  <script src="myscripts2.js"></script>
user10806781
  • 41
  • 10
  • Some ideas: [rewrite](https://stackoverflow.com/a/14995760/6865328), [resource handler](https://stackoverflow.com/a/15000857/6865328), [filter](https://stackoverflow.com/a/33807391/6865328) – WoAiNii Jan 02 '23 at 19:57

2 Answers2

0

As in 2023 there are no HTML tags for cache control to bust!

Try Nginx, it works!

Download Nginx from here
Extract it where ever you want and then:

  • Configuration:

    Go to conf > nginx.conf

    Inside server obj, add add_header Cache-Control "no-store";

    it should be somthing like: 

http {
    ...

    server {
        listen       4652;
        add_header Cache-Control "no-store";
        server_name  localhost;
        ...
    }
  • Some fun fact!

    Many years ago when I started learning web development and fundamentals I faced the same issue and as crafty as I was, I created an automated script to do the versioning. It took its time and I learned many things along the way in bash/batch automation, when I realized I could just use Ctrl + F5 as it was not even a project!
Ryan
  • 72
  • 6
  • I'm trying to implement a cache busting solution i.e add a build number or timestamp as a part of filename or query parameter to css/js links rendered in html page (). – user10806781 Jan 04 '23 at 13:12
  • updated the answer, check it out! @user10806781 – Ryan Jan 09 '23 at 14:59
0

The problem you are encountering is one of the many reasons why build tools exist. If you were using something like webpack, gulp etc, there are relatively straightforward ways to add the hash of your assets to their url in your html file. However if you cannot use any of the above tools, then you could in theory, write a script that fixes your problem.

It would:

  1. parse out static links for your html.
  2. compute their hashes
  3. create a copy of your project directory
  4. rename the cloned directory's copy of the static assets file to append their hashes
  5. update the new names in the cloned directory's copy of your html file.
  6. serve files from the cloned directory.

For html parsing, most languages have a built-in html parser (but you could use regex at your own risk since it is easier to write and you are the one in charge of your html source code).

I have done all these before though and the truth is it is easy but more stress than it deserves. Instead, you should look into upgrading your build tools/setup.

rowend
  • 35
  • 1
  • 4