☰

如何配置 nginx 缓存来帮助 Chrome 浏览器

tag-icon • tag-icon nginx cache google-chrome
如何配置 nginx 缓存来帮助 Chrome 浏览器

我遇到一个问题，Chrome 浏览器无法重新加载更新的 javascript。

这是因为，在 Chrome 中，请求从未发送到服务器。

我支持的其他浏览器（Firefox、Edge、Safari）运行良好；这似乎是因为它们发送了 If-Modified-Since 标头。

该文件作为静态资产集合的一部分提供。所有内容均由 nginx 压缩。

站点可用/默认：

root /var/www;
index index.php index.html index.htm;
// some php stuff ...

/etc/nginx.conf 中的相关行（可能？）

# Proxy cache
proxy_cache_path /var/tmp/nginxcache keys_zone=one:10m;

获取 JavaScript 的 Curl 输出：

< HTTP/1.1 200 OK
* Server nginx/1.4.6 (Ubuntu) is not blacklisted
< Server: nginx/1.4.6 (Ubuntu)
< Date: Sun, 05 Aug 2018 11:52:44 GMT
< Content-Type: application/x-javascript
< Content-Length: 2350005
< Last-Modified: Sun, 05 Aug 2018 11:38:36 GMT
< Connection: keep-alive
< Vary: Accept-Encoding
< ETag: "5b66e1bc-23dbb5"
< Accept-Ranges: bytes

nginx 中是否有配置可以说服 Chrome 也这样做？我探索了以下答案：为 nginx 提供的静态内容设置过期标头和https://stackoverflow.com/questions/17251503/set-expires-to-max-for-all-images-of-all-servers-in-nginx/17253805#17253805但我的正则表达式技能相当差，而且答案也相当老旧。我应该尝试：

location ~ \.js {
    expires 1d;
    add-header Pragma public
    add-header Cache-control "public"
}

答案1

感谢@Michael Hampton 的帮助，我将这个位置块添加到服务器：

    location ~* \.(:manifest|html?|json)$ {
        expires 1d;
    }

所以我的index.html在一天后过期。

我还开始使用 gulp 和 gulp-rev 构建应用程序，以获取应用程序名称的版本哈希，例如 app-xyzz56464.js，然后将其放在 index.html 中。

相关内容