Automatically clean up the cache of js and css files in HTML pages (automatically add version numbers)

In the process of web project development, we often reference css and js files. After updating the files, cache problems often occur (the code has been changed, but it has not changed when accessed on the browser). In this case, we usually use the following two solutions:

1. Clear the browser cache manually

2. Add the version number (such as layout.css?v=1)

Personally, I think method 2 is faster because clearing the browser cache requires waiting for the browser to respond. But it is troublesome to change the version number every time, so we need to find a way to automatically add the version number.

Here is how I collected it:

Method 1: You can automatically add a version number to HTML through js

 <script type="text/javascript">  
document.write("<link rel='stylesheet' type='text/css' href='/css/layout.css?v="+new Date().getTime()+"'>");   
</script>

Method 2: If it is a jsp page, you can use java code to generate a timestamp (if it is a jsp page, you can also use method 1, but this method is more convenient)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

Method 3: Use other methods to add version numbers, such as automatic configuration with node.js

ps: The purpose of clearing the cache is to see the update status of the page in time. When we put the page online (that is, deploy it to the formal environment and will not make any changes), it is recommended to fix the version number, because the cached page is faster to access. When it needs to be updated, replace the fixed version number.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.