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这里)

 

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