前端与全栈开发面试 · 第 28 题

1. 带内容哈希的静态资源(app.3f9a1c.js、图片、字体):Cache-Control: public, max-age=31536000, immutable,长期强缓存;内容一变文件名就变,天然不会读到旧文件。
2. HTML 入口(index.html):Cache-Control: no-cache,每次都协商(ETag 或 Last-Modified),保证用户能及时拿到引用了新哈希文件的页面。
3. 接口数据:一般 no-store 或 private, no-cache;可以缓存的公共数据用短 max-age 加 stale-while-revalidate。
4. CDN:用 s-maxage 单独控制 CDN 的缓存时长;发版时只需刷新 HTML,带哈希的资源无需刷新。
5. Service Worker:可以实现离线访问和更精细的缓存策略,要注意版本更新和缓存清理。
6. 发版顺序:先上传新的静态资源,再更新 HTML,避免 HTML 引用的新文件还不存在;旧文件保留一段时间,给仍在使用旧页面的用户。

核心是「哈希资源长缓存 + HTML 协商缓存」。