缓存预热后为什么部分页面还是频繁请求旧资源？

雨鑫提问于 2026-02-01 17:09:05 阅读 41

优化

最近给项目做缓存预热时遇到奇怪问题，部署新版本后虽然用Nginx预热了大部分资源，但登录页和商品详情页还是频繁请求旧的CSS文件。检查过缓存配置：


location ~* .(css|js)$ {
    add_header Cache-Control "public, max-age=31536000";
    expires 30d;
    proxy_cache_valid 200 30d;
}

也尝试过手动清除旧缓存和设置Version参数，但问题依旧。用Chrome开发者工具看，登录页的main.css?v=202310偶尔会304，而商品页的product.css却直接404后重新下载。难道是缓存策略没覆盖到某些路由？或者预热脚本没命中关键URL？

我来解答赞 5 收藏

反馈

2 条解答

シ楠楠 Lv1

听你这描述，问题出在缓存键没正确更新上。WordPress项目里这种情况很常见，尤其是带版本号的静态资源。

先说解决办法：你需要确保每次部署时，wp_enqueue_style或wp_enqueue_script里的版本号都正确更新了。如果用的是主题自带的加载方式，可以这样修改：

function enqueue_custom_styles() {

    wp_enqueue_style('main-style', get_template_directory_uri() . '/css/main.css', array(), filemtime(get_template_directory() . '/css/main.css'));

    wp_enqueue_style('product-style', get_template_directory_uri() . '/css/product.css', array(), filemtime(get_template_directory() . '/css/product.css'));

}

add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

这里用filemtime动态获取文件修改时间作为版本号，保证每次文件改动后版本号都会变。

另外，登录页和商品页可能用了不同的缓存策略，检查下是不是有些页面用了nocache_headers()或者漏掉了Nginx配置中的某些规则。

最后提醒一句，别忘了清空浏览器和服务端缓存后再测试，不然又会让你怀疑人生。

2026-02-01 22:09

程序员芳宁 Lv1

听起来你已经做了不少排查，但问题还是没解决。这种情况我之前也遇到过，大概率是版本号或者缓存更新机制出了点小纰漏。

先说登录页的 main.css?v=202310 偶尔出现 304 的情况，这说明浏览器确实缓存了旧版本文件，但可能你的构建工具没有正确更新版本号。检查一下你的打包配置，确保每次发布时 ?v= 后面的值真的变了。如果用的是 Webpack 或 Vite，可以看看它们的缓存 busting 配置是不是生效了。

再说商品页的 product.css 直接 404，这个更可能是路径问题。有时候预热脚本只命中了一部分 URL，导致某些资源没被正确缓存。建议你手动检查 Nginx 的日志，看看是否有漏掉的路由或资源路径。另外，确认下前端代码里引用的 CSS 路径是不是动态生成的，如果是，可能会出现路径不一致的情况。

最后给个小建议：可以在 JS 里面加个简单的调试代码，打印出实际加载的资源路径，比如：

document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {

    console.log(link.href);

});

这样能快速定位哪些 CSS 文件被加载了，路径是否正确。

总结一下，重点查两个地方：一是构建工具的版本号管理，二是资源路径的一致性。按这个思路走基本能解决问题。

2026-02-01 17:09