单页应用静态资源“秒开”的关键是精准缓存策略：带哈希的资源用^~强缓存1年且immutable，html和入口文件每次校验，文件类型正则规则须置于^~之后、/之前，兜底location /仅用try_files回退index.html。

让单页应用静态资源“秒开”，关键不在压缩体积，而在精准控制缓存策略与请求路径匹配逻辑。核心是：带哈希的资源强缓存一年且不可变，HTML 和入口文件必须每次校验，所有规则顺序不能错。

用 ^~ 精准拦截静态资源目录

Next.js、Vite 或 Vue CLI 构建产物中，像 /_next/static/、/assets/、/static/ 这类路径结构稳定，必须用 ^~ 修饰符匹配：

• 它一命中就终止后续所有正则检查，避免被后面 ~* \.js$ 规则重复处理
• 优先级高于普通前缀和正则，且按“最长前缀”匹配，适合构建输出固定的场景
• 示例配置：
  location ^~ /_next/static/ {
    root /var/www/app;
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

按文件类型统一设置强缓存

对已带内容哈希的 JS/CSS/图片/字体等资源（如 main.a1b2c3.js、logo.d4e5f6.png），用不区分大小写的正则批量控制：

• 必须放在所有 ^~ 块之后、location / 之前，防止被兜底规则覆盖
• 缓存时间设为 1 年，并加 immutable，浏览器就不会发 If-None-Match 条件请求
• 示例：
  location ~* \.(js|css|png|jpg|jpeg|gif|webp|woff2|ttf|eot|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

HTML 和无哈希资源必须禁用强缓存

单页应用的 HTML 是客户端路由入口，一旦缓存旧版，会导致白屏或路由错乱；favicon.ico 等无哈希资源也需谨慎处理：

• HTML 文件强制不缓存：
  location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
  }
• favicon 可缓存 1 小时，同时关闭 404 日志避免刷盘：
  location = /favicon.ico {
    alias /var/www/app/favicon.ico;
    expires 1h;
    log_not_found off;
  }

兜底 location / 必须放最后且只用 try_files

客户端路由依赖服务端将未命中路径回退到 /index.html，这个逻辑不能被前面任何规则截断：

• 该块必须位于所有 =、^~、~* 规则之后
• 只写 try_files $uri $uri/ /index.html，不要在里面加 expires 或 proxy_pass
• 示例：
  location / {
    root /var/www/app;
    try_files $uri $uri/ /index.html;
  }