nginx,控浏览器缓存,前端优化方案

1,困惑

  做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面,

因为一直做企业后台管理,针对人少的公司直接通知刷新页面(这也是做内部系统才敢这么给用户说),超千人的公司,跨省跨国的,就直接会被劈了,网上有很多解决方案,比如在js上添加版

本号这个方法可行,因为浏览器的缓存机制是针对是针对url来缓存的,比如添加:"http://test.com/test.js?verson=1.1" (这里verson只是为了好看,其实随便怎么写的可以

ru:aaa,bbb.ccc都可以只要和上次不一样就可以了).之前用做extjs的时候就是 用这种方案自定义个JavaScript标签 在每次发布文件后,都批量跟新一下版本号,这么做就保证每个js都是最新版本,这么做有个问题就是,发了一个js文件,其他文件,浏览器都要从服务器去取,如果小项目那就无所谓.

现在公司用的html页面+angular js ,自定义标签是行不通了,这里就是下nginx解决方案;

2,nginx解决方案

  原理就是告诉浏览器哪些要缓存哪些不用缓存,通过设置响应头来实现

比如:

      location /tpp3 {  
                root   html;  
                  #js css html 文件不缓存
                  if ($request_filename ~* ^.*?.(js|html|css)$){
                     add_header Cache-Control no-cache;
                  }
                  if ($request_filename ~* ^.*?.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx|jpg|png)$){
                    add_header Cache-Control max-age=864000;#缓存一天
                  
                 }
                proxy_pass  http://tppip/tpp3;  
                proxy_set_header  X-Real-IP  $remote_addr;  
                client_max_body_size  100m;  
                index  index.html index.htm;
                               
            } 

上面只是一个最基础的列子,实际项目中,js,html ,css也是肯定需要缓存的,针对哪些图片,音频文件直接的可以长期缓存,

配置上面代码至少可以保证发布html,css,js文件,用户取到看到的效果都是最新数据,可以看下浏览器监控发现:

html:

图片:

可以发现html文件一直都是304 Not Modified 而图片都是 200ok(BFCahe)(两个区别可以参考:https://www.bokeyy.com/post/200-ok-from-cache-vs-304-not-modified.html这里)

 

结尾:时间有限这里只是初步介绍下还未应用到项目中,后期会有完整的前端优化解决方案,如果有更好方案的大神望分享!