前端性能优化之文件缓存

webpack 配置优化

使用 contenthash 生成唯一文件名，确保文件内容变动时文件名也会变。搭配长时间强缓存，让浏览器在缓存有效期内直接使用本地副本，避免重复请求。没变化的文件（文件名相同）可以一直命中缓存，变化的文件（文件名不同）会立即请求最新版本。

一般会搭配强缓存使用，即所谓的永久缓存策略。

HTTP 缓存机制

强缓存（Strong Caching）

通过设置 Cache-Control 和 Expires 响应头，让浏览器在指定时间内直接使用缓存，不发起请求。命中强缓存时，浏览器不会发起 HTTP 请求。


Cache-Control: public, max-age=31536000, immutable

public：响应可被任何中间缓存（如 CDN、代理）缓存。

max-age=31536000：缓存有效期为 1 年（单位：秒）。

immutable：资源不会改变，浏览器无需重新验证。

协商缓存（Negotiated Caching）

当强缓存过期或未命中时，浏览器会向服务器发请求，并在请求头中带上上次缓存的验证信息：

If-None-Match（配合 ETag 使用）

If-Modified-Since（配合 Last-Modified 使用）

服务器的对比标识：

一致 → 返回 304 Not Modified，浏览器继续用本地缓存

不一致 → 返回新内容和新的验证头

ETag 和 Last-Modified 的生成方式

静态文件直接由 Nginx 提供：Nginx 会自动生成 Last-Modified（取文件系统时间）和 ETag（基于文件 inode、大小、修改时间计算）。

Nginx 反向代理后端应用：如果后端返回了这些头，Nginx 原样转发；如果后端没返回，Nginx 默认不会生成。

无中间件，直接应用返回：由应用代码决定是否生成 ETag 和 Last-Modified。

服务器配置

配置强缓存

针对带有 hash 的静态资源，可安全设置长时间强缓存，默认不开启：


location ~* \.(js|css|png|jpg|jpeg|gif|svg)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

配置协商缓存

Nginx 静态文件服务默认开启 Last-Modified 和 ETag ，也可在 http/server/location 块中设置。