nginx配置浏览器缓存 (试验)

目标:主要为了实现在客户端的浏览器访问BS项目时  项目更新后  只需要刷新页面获取新内容  而不是要先清除浏览器缓存在去重新登录系统

实现:  在nginx.conf中配置那些文件需要强缓存   那些文件需要不需要缓存 以达到项目更新后 浏览器刷新时不请求缓存直接请求服务器

hash值:

通过判断hash值  判断文件是否发生了变化    etag是一种hash值  可以判断文件内容是否发生了变化   

  • 当浏览器去服务器请求资源的时候,会带上服务器上次返回的etag值.服务器根据这个etag值和当前资源的etag值进行对比.如果一致说明文件没有变动,返回304状态码,如果不一致说明有变动返回200状态码.

大概两种项目文件:

项目文件分为两种

一种是静态资源文件  一般不会变化  所以这些文件 我们直接设置他为4天内的强缓存  (只要访问一定是访问本地缓存)

一种是除了静态资源的项目代码等  这种文件通过hash值判断  没有变化则不请求   变化了则直接请求服务器而不是本地缓存

具体实现方式:

在server{}代码块中使用正则表达式判断文件类型    静态文件则配置为4天强缓存  非静态文件配置为不缓存    

转载来源:Nginx配置浏览器缓存_随风浅入画的博客-CSDN博客_nginx设置浏览器缓存

nginx.conf文件内容如下

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

user  nginx;
worker_processes  auto;
# set open fd limit to 30000
 worker_rlimit_nofile 30000;


error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

     #gzip  on;

     # 开启gzip
    gzip on;
    # 开启gzip_static
    # gzip_static 开启后可能会报错,需要安装相应的模块, 具体安装方式可以自行查询
    # 只有这个开启,vue文件打包的.gz文件才会有效果,否则不需要开启gzip进行打包
    gzip_static on;
    gzip_proxied any;
    # 启用gzip压缩的最小文件;小于设置值的文件将不会被压缩
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    # 如果nginx中使用了多层代理 必须设置这个才可以开启gzip。
    gzip_http_version 1.0;
    # gzip 压缩级别 1-10
    gzip_comp_level 2;
    # 进行压缩的文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 是否在http header中添加Vary: Accept-Encoding,建议开启
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    # etag协商缓存 默认是开启的
    etag on;


    include /etc/nginx/conf.d/*.conf;
    
    
    server {
    #使用location进行正则匹配文件名称,针对特定的文件进行不同的强缓存设置
    # html设置成协商缓存或者不缓存
    #匹配html文件
    location ~* \.(html)$ {
    # 关闭访问日志
        access_log off;
        # 添加响应头,no-cache:协商缓存,no-store:不缓存
        #配置为不进行强缓存
        add_header  Cache-Control  max-age=no-cache;
      }
    
    # 特定文件设置强缓存
        location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
        access_log off;
            #配置为强缓存时长是360000毫秒   也就是4天
        add_header    Cache-Control  max-age=360000;
      }
}

    
}

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值