nginx静态资源浏览器缓存

1.缓存介绍

作用:提升用户体验,减少服务器压力
浏览器无缓存:浏览器发起请求->无缓存->请求WEB服务器->web服务器检查是否有更新(没有更新返回304)->呈现
浏览器有缓存:浏览器发起请求->有缓存->检验过期->web服务器检查是否有更新(没有更新返回304)->呈现
检验过期:http头部(expires HTTP1.0) cache-control(max-age http1.1)
nginx缓存配置:expires ,可以配置在http,server,location标签中

2.nginx缓存配置
这里我配置在server标签中location外,也就是说对server的所有资源进行缓存,如果是设置行指定location中那么是对指定的location资源进行缓存

#vim /usr/local/nginx/conf/nginx.conf 
http {
    server { 
    expires 1h;    
}
}

3.没有缓存配置之前:响应报头中不存在cache-control缓存控制
1195071-20180518185930278-92113534.png
4.有缓存配置之后:在响应报头中存在max-age=3600 也就是1个小时有效时间
1195071-20180518185818867-394027101.png

转载于:https://www.cnblogs.com/lovelinux199075/p/9057526.html

### 使用 Nginx 进行静态资源缓存的最佳实践 #### 1. 配置缓存路径和容量 在 `http` 块中定义缓存存储的位置以及其参数。通过设置合理的缓存大小和失效时间,能够有效管理磁盘空间并优化性能。 ```nginx http { proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60d; } ``` 上述配置表示创建了一个名为 `my_cache` 的缓存区域,位于 `/data/nginx/cache` 目录下[^2]。其中: - `levels=1:2` 定义了两级子目录结构以分布文件。 - `keys_zone=my_cache:10m` 设置内存中的键值区大小为 10MB。 - `max_size=10g` 表示最大允许使用的磁盘空间为 10GB。 - `inactive=60d` 指定如果某个条目超过 60 天未被访问,则会被移除。 #### 2. 启用浏览器缓存控制 利用 HTTP 协议头字段(如 `Cache-Control`, `Expires` 和 ETag)来指导客户端如何处理已下载的内容。 ```nginx location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 30d; # 设定资源的有效期限为30天 add_header Cache-Control "public, must-revalidate"; } ``` 此段代码设置了常见静态文件类型的过期时间为 30 日,并标记它们可公开缓存[^4]。这有助于减少重复请求次数,加快页面加载速度。 #### 3. 版本化 URL 或文件名 为了避免因修改后的静态资源未能及时更新到用户的设备上而导致显示异常的情况发生,建议采用版本号或者哈希值附加于链接地址之后的方法实现强制刷新机制。 例如,在构建过程中可以通过 Webpack 插件等方式自动生成带有唯一标识符的新文件名称: ```javascript output: { filename: '[name].[contenthash].bundle.js', }, ``` 这样当任何一处源码发生变化时都会生成全新的输出文件,从而确保即使旧版仍处于缓存状态也不会影响新功能展现效果。 #### 4. 不缓存 HTML 文件 考虑到HTML文档可能经常变动且依赖实时数据呈现最新信息,因此通常推荐不对这类内容实施长期保存措施以免造成不必要的麻烦。 ```nginx location ~* \.html$ { add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate"; expires -1; } ``` 这里明确指示不要对 `.html` 类型的数据进行任何形式上的持久化保留操作。 --- ### 总结 综上所述,通过对Nginx适当调整相关选项即可达成高效稳定的静态资产分发目标。不仅提升了整体系统的吞吐量还降低了后端压力成本开销等问题得到缓解的同时也增强了最终用户体验质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值