前端 - 关于引用样式文件或资源文件的版本号问题

Question

有时在引用样式文件或资源文件时会加上版本号
例如：
style.css?v=20140520
background: xxx.jpg?v=201140520
我是菜鸟，有这么几个困惑：

• 这样的好处和必要性是什么？我只知道一点，避免用户端的缓存而使样式不刷新。请问还有别的考虑吗？
• 在什么情况下是可以不加的，在什么情况下是必须加的？因为我在读别的网站源码的时候发现有些是加的，有些是不加的。
• 服务器根据版本号返回相应版本的文件的机制是怎么样的？我之前对svn，git等版本管理工具的认识仅仅停留在团队代码协作工具上。是不是在这个机制里是svn起的作用？具体的流程是怎样的？
• 如何确定版本号？我看很多代码加版本号的时候是加日期？还有别的方式吗？如何知道自己该加的版本号是什么？

Answer 1

We hope the engineer source code is written like this:

<script type="text/javascript" src="a.js"></script>

But the online code is like this:

<script type="text/javascript" src="a_82244e91.js"></script>

The string of characters "_82244e91" is obtained by hashing based on the content of the a.js file. It will only change if the content of the file changes. Since the version sequence is written together with the file name instead of overwriting the file with the same name, the problems mentioned above will not occur. At the same time, there are other benefits of doing this:

The online a.js is not overwriting the file with the same name, but the redundancy of the file name + hash, so the static resources can be online first, and then the html page, and there is no gap problem;
When you encounter a problem and roll back the version, there is no need to roll back a.js, just roll back the page;
Since the static resource version number is the hash of the file content, permanent strong caching can be enabled for all static resources. Only files with updated content will be enabled
Cache invalidation, cache utilization greatly increased;
After modifying the static resources, new files will be generated online. One file corresponds to one version, so it will not be attacked in the form of CDN cache construction

Static resource version update and caching

Answer 2

1. You are right, the benefit and necessity of this is to avoid caching on the user side and causing the style to not be refreshed. Nothing else matters.
2. If there is a need for rapid version iteration, it is recommended to add it to facilitate users to update in time. If it is a page that has not been updated for a long time, there is no need to add it.
3. Usually the publishing and packaging tools are responsible for outputting the specific version number.
4. You can choose the overall version number of the version management tool, you can choose the modification or packaging date number, you can choose any customized version number (such as the version number manually specified in the header file), in short, you can choose according to your needs. Generally, just use the date number, which is relatively simple.

Answer 3

1. For static files that often need to be modified. A new version number is automatically generated after each modification. The browser will cache the new file.
   You don’t need to add this if it is commonly used. For example, if you use a third-party library that is not allowed to be customized, the frequency of version upgrades will not be very high. This can be omitted.