三步根治前端缓存 “顽疾”

引言：你的代码更新，用户为何“视而不见”？

“我明明部署了新版本，用户为什么还在看旧页面？！” —— 这是多少前端开发者深夜加班时的灵魂拷问。

问题的根源往往不是代码没上传，也不是服务器抽风，而是浏览器和服务器联手上演的一场“缓存大戏”。

本文将带你化身“侦探🕵️♂️”，用三步精准定位问题，手把手教你解决页面未更新问题，让用户永远看到最新鲜的页面！

一、案发现场：缓存是如何“偷梁换柱”的？

1.1 经典症状

1.2 幕后黑手

二、破案工具：缓存控制响应头

2.1 强缓存 vs 协商缓存

Cache-Control: max-age=31536000  # 缓存一年！

Last-Modified: Wed, 20 May 2024 08:00:00 GMT  
ETag: "abc123"  

2.2 核心原则



# 构建产物示例
/dist/index.html
/dist/logo.png
/dist/assets/main.3f7a8b.js
/dist/assets/style.abcd12.css
/dist/assets/hello.ac2314.png

三、终极方案：三步根治缓存问题

3.1 第一步：Nginx 精准狙击（配置示例）

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/your/dist;

    # ==============================================
    # 1. 处理 /assets/ 目录下的带哈希资源（长期强缓存）
    # ==============================================
    location ^~ /assets/ {
        # 缓存 1 年（兼容旧浏览器）
        expires 1y;
        # 现代浏览器强缓存（immutable 表示内容不可变）
        add_header Cache-Control "public, max-age=31536000, immutable"; 
        # 安全加固，防止 MIME 类型嗅探
        add_header X-Content-Type-Options "nosniff";
        
        # 直接返回文件，不再检查其他规则
        try_files $uri =404;
    }

    # ==============================================
    # 2. 处理其他目录下的无哈希静态资源（短期缓存）
    # ==============================================
    location ~* \.(?:js|mjs|css|png|jpg|jpeg|gif|ico|svg|webp|avif|woff|woff2|ttf|otf|eot|mp4|mp3|webm|ogg|json|xml|txt|csv|wasm)$ {
        # 排除 /assets/ 目录的干扰
        if ($request_uri ~* "^/assets/") {
            break; # 跳过此规则
        }

        # 不包含哈希值的静态资源，设置较短的缓存时间
        add_header Cache-Control "public, max-age=3600, must-revalidate";
        # 安全加固，防止 MIME 类型嗅探
        add_header X-Content-Type-Options "nosniff";
        
        # 直接返回文件，不再检查其他规则
        try_files $uri =404;
    }

    # ==============================================
    # 3. 处理前端路由请求（禁用缓存）
    # ==============================================
    location / {
        # 禁用缓存
        add_header Cache-Control "no-store, no-cache, must-revalidate";
        add_header Pragma no-cache;
        add_header Expires 0;
        
        # 先尝试匹配静态资源，否则回退到 index.html
        try_files $uri $uri/ @fallback;
    }

    # ==============================================
    # 4. 统一回退到 index.html
    # ==============================================
    location @fallback {
        rewrite ^ /index.html last;
    }
}

关键解释：

3.2 第二步：构建 hash 文件名（自动防旧）

使用构建工具在构建时为文件名添加 hash：

# 构建产物示例
/dist/assets/main.3f7a8b.js
/dist/assets/style.abcd12.css

文件内容变化 → hash 值变化 → 静态资源缓存自动失效

3.3 第三步：版本号核弹（兜底方案）

检查版本更新 1.构建时通过插件 @jd/plugin-create-version 在 HTML 中埋入版本时间、生成 version.json 2. 在 调接口 和 切换路由 时进行检查并提示刷新





 



index.html

<!-- 注入构建时间戳 -->
<meta name="version-time" content="2025-03-04 06:57:50">

version.json

{
  "versionTime": "2025-03-04 06:57:50"
}

checkVersion.ts（简略代码，完整版请咚咚）

/**
 * 检查系统版本更新
 * 获取最新版本并与本地版本对比
 * 若版本不同，显示更新提醒message
 */
export const checkVersion = async () => {
  // 获取本地 meta 标签中的版本号
  let localVersion: string | null = '';
  const metaTag = document.querySelector('meta[name="version-time"]');
  if (metaTag) {
    localVersion = metaTag.getAttribute('content');
  }

  // 获取远程最新版本
  const response = await fetch(`/version.json?t=${Date.now()}`, {
    cache: 'no-store',
  });
  const { versionTime: latestVersion } = await response.json();

  // 版本对比
  if (localVersion && latestVersion && localVersion !== latestVersion) {
    ElMessage('发现新版本，点击刷新获得更加体验~');
  }
};

四、破案验证：你的配置真的生效了吗？

4.1 一键验证工具

# 查看 路由/HTML 响应头（应禁用缓存）
curl -I https://your-domain.com/about

# 期望输出：
HTTP/1.1 200 OK
Cache-Control: no-store, no-cache, must-revalidate
Expires: 0

# ==============================================

# 查看 带hash静态资源 文件响应头（应长期缓存）
curl -I https://your-domain.com/assets/main.3f7a8b.js

# 期望输出：
HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000, immutable
Expires: Wed, 20 May 2025 00:00:00 GMT

# ==============================================

# 查看 不带hash静态资源 文件响应头（应短期缓存）
curl -I https://your-domain.com/logo.png

# 期望输出：
HTTP/1.1 200 OK
Cache-Control: public, max-age=3600, must-revalidate

4.2 经典翻车现场

五、高级技巧：当缓存遇上跨域和接口代理

5.1 接口代理的缓存隔离

location /api {
    proxy_pass http://backend-server/api;

    # 接口专属配置：禁用缓存 + 跨域控制
    add_header Cache-Control "no-store";
    add_header Access-Control-Allow-Origin "https://your-frontend-domain.com";
    add_header Access-Control-Allow-Credentials "true";
}

5.2 安全加固（防御 MIME 嗅探攻击）

add_header X-Content-Type-Options "nosniff";  # 禁止浏览器猜测文件类型

六、总结：缓存是把双刃剑！

永远对缓存保持敬畏！ 新版本部署时使用 灰度发布 、查看 监控报警



四条黄金法则：