前端上线后实现“自动刷新”

前端上线后实现“自动刷新”通常指的是用户在访问网站时，能自动获取到最新版本的代码（如 HTML、CSS、JS 等），而不会因为浏览器缓存导致看到旧内容。以下是几种常见的解决方案：

1. 利用缓存控制（Cache-Control）

在服务器响应头中设置合适的缓存策略，防止浏览器长期缓存静态资源。

• 对于 HTML 文件：建议设置较短的缓存时间或不缓存

  Cache-Control: no-cache, no-store, must-revalidate
  

• 对于 JS/CSS/图片等静态资源：使用带 hash 的文件名（见下一点），并可设置长期缓存

  Cache-Control: public, max-age=31536000
  

✅ 优点：简单有效
❌ 缺点：HTML 每次都要重新请求

2. 文件名添加哈希（Hash）或版本号（推荐）

构建工具（如 Webpack、Vite、Rollup）支持在输出文件名中加入内容哈希：

// webpack.config.js 示例
output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js'
}

这样每次代码变更，文件名就会变化，浏览器会当作新资源加载。

同时，入口 HTML 中引用的资源路径也会自动更新。

✅ 优点：充分利用缓存，又确保更新生效
✅ 这是现代前端工程化的标准做法

3. Service Worker 更新机制（PWA 场景）

如果你使用了 PWA（Progressive Web App），可以通过监听 Service Worker 的更新事件，提示用户刷新：

// 注册 SW 后监听更新
navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.addEventListener('updatefound', () => {
    const newWorker = reg.installing;
    newWorker.addEventListener('statechange', () => {
      if (newWorker.state === 'activated' && !navigator.serviceWorker.controller) {
        // 首次加载
      } else if (newWorker.state === 'activated') {
        // 有新版本，可提示用户刷新
        showReloadPrompt();
      }
    });
  });
});

或者强制跳过等待，立即激活新 SW：

self.skipWaiting();
clients.claim();

⚠️ 注意：需谨慎处理，避免强制刷新影响用户体验

4. 轮询检查版本（适用于管理后台等场景）

前端定期向服务器请求当前版本号（如 /api/version），与本地版本对比，若不同则提示刷新：

// 假设本地版本存在 window.APP_VERSION
setInterval(async () => {
  const res = await fetch('/api/version');
  const { version } = await res.json();
  if (version !== window.APP_VERSION) {
    if (confirm('有新版本，是否刷新？')) {
      window.location.reload();
    }
  }
}, 60000); // 每分钟检查一次

✅ 适合内部系统或强一致性要求的场景
❌ 不适合普通用户网站（体验差）

5. CDN 缓存刷新

如果你使用了 CDN（如阿里云、Cloudflare、AWS CloudFront），上线后记得手动或自动刷新 CDN 缓存，否则用户仍会看到旧资源。

• 可通过 CDN 提供的 API 在 CI/CD 流程中自动刷新
• 或配置 CDN 忽略 query string 缓存（但不如 hash 方案可靠）

总结：最佳实践 ✅

1. HTML 不缓存（或极短缓存）
2. 静态资源使用 contenthash 命名
3. 服务器正确配置 Cache-Control
4. CI/CD 中自动刷新 CDN（如有）
5. （可选）PWA 场景用 Service Worker 管理更新

这样用户访问时，HTML 总是最新的，而引用的 JS/CSS 因为文件名变化也会自动加载新版本，实现“无感自动刷新”。