给静态资源设置缓存

原文地址 : NGINX: Add Client-side Caching for Static Assets- RewriteGuide

向浏览器发送缓存指令,这些指令将用于在客户端缓存静态资源。将对网站页面加载的感知速度产生明显影响,因为这些静态资产在浏览器缓存中存在时不会向 Web服务器 发送新请求

让浏览器缓存 30 天资源, 可以使用以下代码块

1
2
3
4
5
6
7
server {
# ...
location ~* \.(css|js|jpg|jpeg|png|gif|ico|txt|woff|woff2|ttf)$ {
expires 30d;
}
# ...
}

在对位于上面 | 分隔的列表的静态资产发出第一个请求后,浏览器将在本地缓存该文件。对 logo.png 文件的请求将从浏览器的本地缓存中获取,而不是从服务器重新请求 logo.png (直到缓存过期(30天后),或者直到用户清除其浏览器缓存或以其他方式从浏览器缓存中清除)

如果希望对特定类型的静态资产的缓存时间长度进行更细粒度的控制,只需将它们分解为更具体的组

1
2
3
4
5
6
7
8
9
10
11
12
13
server {

# ...
location ~* \.(jpg|jpeg|png|gif|ico|txt|woff|woff2|ttf)$ {
expires 30d;
}

location ~* \.(css|js)$ {
expires 7d;
}
# ...

}

上面的两条规则将缓存图像和字体30天,css 和 javascript 文件缓存7天

值得注意的是,使用静态资产缓存的一个缺点是,更新的 logo.png 可能会失去控制;如果浏览器缓存了旧 logo.png ,则将使用缓存的文件而不是更新的文件。重命名文件将导致提供新文件,或缓存破坏技术(例如将query_string附加到静态资产的 url,如 logo.png?v=1.2.3)也可以解决此问题。这是对于客户端缓存的一个小小的考虑权衡的项目


语雀镜像 : 给静态资源设置缓存 ,点此 提问

作者

Duoli

发布于

2022-09-29

更新于

2022-09-29

许可协议

评论