如何为外部JavaScript链接添加可变版本参数以规避缓存问题

首先得明确：你直接在script标签的src里写new Date().getTime()是行不通的——浏览器会把这个表达式当成纯字符串解析，实际请求的URL会变成http://mySite/jsfile.js?new%20Date().getTime()，根本不会执行JS生成时间戳。下面给你两个实用的解决方案：

方案一：让引用方用动态脚本创建代码（快速落地） #

如果其他网站愿意嵌入一小段JS代码，而非直接写静态script标签，可以让他们用这段代码：

// 替换成你的JS文件地址
const jsUrl = 'http://mySite/jsfile.js';
// 创建script标签并动态添加时间戳参数
const script = document.createElement('script');
script.src = `${jsUrl}?t=${new Date().getTime()}`;
script.type = 'text/javascript'; // 推荐用type代替language，更符合标准
document.head.appendChild(script);

这样每次页面加载时，都会生成全新的时间戳作为参数，彻底绕过浏览器缓存。唯一小缺点是如果访问者禁用了JS，这个脚本就失效了，但一般嵌入第三方JS的场景都默认允许JS运行。

方案二：服务器端自动生成内容哈希版本（更优雅高效，推荐） #

这个方案不需要引用方做任何修改，所有逻辑都在你的服务器上处理，是行业通用的最佳实践：

• 当你更新JS文件时，自动计算文件内容的哈希值（比如MD5、SHA-1），把哈希作为版本标识——比如把文件重命名为jsfile.abc123.js，或者保留原文件名但加参数jsfile.js?v=abc123。
• 配置你的服务器（Nginx、Apache等）：
  • 对于带哈希版本的JS文件，设置长期缓存（比如Cache-Control: max-age=31536000），因为哈希不变的话文件内容不会变。
  • 提供一个固定的入口链接（比如http://mySite/jsfile.js），服务器内部自动重定向到带最新哈希的版本，或者动态生成带哈希的响应头。
• 这样其他网站只需要一直引用http://mySite/jsfile.js，当你更新JS后，哈希值变化，浏览器会自动请求新的文件，完全不需要引用方修改代码。

为什么推荐方案二？ #

用时间戳的话，哪怕文件内容没变化，浏览器每次都会重新下载，浪费带宽和加载时间；而内容哈希的方式，只有当文件真的更新时才会触发新请求，兼顾了缓存效率和更新及时性的需求。

内容的提问来源于stack exchange，提问作者Khld Z.