如何让浏览器缓存文件以优化多JS/CSS文件应用的加载速度

嘿，这个场景我帮不少开发者处理过——200个JS/CSS文件的加载量，加上首次请求的中断问题，后续缓存没配置好的话，用户每次打开都要等半天，确实头疼。咱们从核心的HTTP缓存配置说起，再搭配一些优化手段，把后续访问的速度拉上来：

浏览器缓存的关键完全在服务器返回的HTTP响应头，分两种策略，按需搭配用：

1. 强缓存：让浏览器直接读本地缓存，零请求开销 #

这是最优方案，适合不常变动的资源（比如第三方类库、打包后的静态资源）：

• 用Cache-Control头（现代浏览器首选）：比如设置Cache-Control: public, max-age=31536000，public表示CDN和浏览器都能缓存，max-age是缓存有效期（这里是1年，单位秒）。
• 关键配合：给资源加内容哈希文件名，比如把utils.js改成utils.7a2b9c.js。每次代码更新，文件内容变了哈希就变，浏览器会自动请求新文件，完全不用担心缓存过期的问题。
• 旧兼容：如果要支持IE这类老浏览器，可以再加Expires: Thu, 31 Dec 2025 23:59:59 GMT，但它优先级比Cache-Control低，现在主要是兜底用。

2. 协商缓存：资源变动才拉新，不变就复用缓存 #

适合可能动态更新、没法加哈希文件名的资源：

• Last-Modified + If-Modified-Since：服务器返回资源最后修改时间Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT，下次浏览器请求时会带上If-Modified-Since头，服务器对比时间，没变化就返回304 Not Modified，让浏览器用本地缓存。
• ETag + If-None-Match（更精准）：服务器生成资源内容的唯一哈希（比如MD5）作为ETag: "7a2b9c1d"，下次请求浏览器带If-None-Match，服务器对比哈希，一致就返回304。推荐优先用这个，因为Last-Modified只能精确到秒，文件在1秒内修改会漏判。

光靠缓存还不够，200个文件哪怕都缓存了，每次加载也要发一堆请求（哪怕是304，也有握手开销），所以得从源头上减少请求：

• 打包合并资源：用Webpack、Vite或者Rollup把零散的JS/CSS打包成几个大文件，比如拆分出vendor.js（第三方类库，几乎不变，缓存一年）、app.js（业务代码，缓存半年），这样缓存命中率更高，请求数直接从200降到个位数。
• 预加载核心资源：首页的30个启动必备文件，用<link rel="preload" href="vendor.js" as="script">告诉浏览器优先加载这些资源，避免依赖触发的延迟加载拖慢类库启动。
• Service Worker（进阶）：如果要做离线访问或者更精细的缓存控制，可以写个Service Worker拦截所有资源请求，自己定义缓存规则——比如把核心类库强制缓存，动态内容按需缓存。适合对体验要求极高的场景。

• HTML文件别设强缓存：如果给首页HTML加了max-age=31536000，用户网站更新后，浏览器还会读旧HTML，看不到新内容。HTML要么用协商缓存，要么在URL加版本号（比如index.html?v=20241021）。
• 第三方CDN资源：如果是从CDN加载的类库，尽量用固定版本的链接（比如react@18.2.0.min.js），别用latest，不然CDN的缓存会失效，每次都要拉新。而且靠谱的CDN已经给资源配置了最优缓存头，你不用额外改。
• 测试验证：用浏览器开发者工具的Network面板，先勾选「Disable cache」测试首次加载，然后关掉刷新，看资源是不是从Disk Cache或Memory Cache加载，状态码是200（from cache）或者304，这样就说明缓存生效了。

内容的提问来源于stack exchange，提问作者chickens