前端静态资源缓存控制：ETag、Last-Modified、Cache-Control 的最小组合

一句话承诺：用一张表和两段配置，快速摆平前端静态资源的缓存控制，减少不必要的请求。

对照表：三者关系

Nginx 最小配置示例

server {
  listen 80;
  server_name _;
  location /static/ {
    root /var/www/html;
    etag on;
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
}

Node.js（Express）示例

const express = require('express');
const app = express();
app.use('/static', express.static('public', {
  etag: true,
  lastModified: true,
  maxAge: '365d',
  immutable: true
}));
app.listen(3000);

少量解释

• immutable 适用于文件名带哈希的静态资源（如 app.abc123.js），保证长期缓存不强校验。
• ETag 适合动态内容或非哈希文件，变更时即可触发新请求。
• Last-Modified 可与 ETag 并存，提升命中率。

常见坑与替代法

• 坑：每次部署静态文件名不带哈希，导致缓存命中错误。替代：构建阶段加入指纹命名。
• 坑：滥用 no-cache 导致频繁校验。替代：合理使用 max-age 与 immutable。
• 坑：ETag计算昂贵。替代：对大文件使用Last-Modified为主，ETag为辅。

下一篇预告

CSS Grid 速查：三行代码做出两列布局与常见坑位图（mermaid思维导图）。