自动获取新版本 js 静态文件

场景

代码里有静态js文件，发布一个版本1.0在真实环境，再修改重新发布2.0，用户如何得到新版本？

方法

一、文件名哈希策略（最推荐）
通过构建工具为文件生成唯一哈希值，使每次更新后的文件名不同。浏览器会将新文件视为独立资源，自动请求最新版本：

实现方式：
```
// Webpack配置示例（output部分）
output: {filename: 'main.[contenthash:8].js'
}
```
• 使用contenthash根据文件内容生成哈希，内容不变时哈希值不变，最大化利用缓存。
优势：
• 用户无感知自动更新：旧版本文件仍保留在服务器，新版本通过新哈希文件名触发请求。

• 缓存利用率高：未修改的资源保持长期缓存（如设置Cache-Control: max-age=31536000）。

二、URL参数版本控制
在引用JS文件时添加动态版本号或时间戳参数：

<script src="main.js?v=2.0"></script>
<!-- 或 -->
<script src="main.js?t=20250521"></script>

• 适用场景：小型项目快速迭代，无需复杂构建工具。

• 注意：需手动更新版本号，且部分浏览器可能缓存带参数的URL（需配合Cache-Control: no-cache头）。

三、服务端缓存策略优化
通过HTTP响应头控制缓存行为：

# Nginx配置示例（强缓存+哈希策略）
location /static/ {add_header Cache-Control "public, max-age=31536000, immutable";
}

• immutable属性：明确告知浏览器文件内容永久不变，避免重复验证（需配合哈希文件名使用）。

• 协商缓存补充：对无哈希的普通文件使用ETag或Last-Modified头，确保内容变化后触发更新。

四、用户端辅助更新策略

版本检测提示：

// 前端版本检测逻辑（示例）
const currentVersion = '2.0';
if (localStorage.lastVersion !== currentVersion) {localStorage.lastVersion = currentVersion;window.location.reload(true); // 强制刷新
}