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這裏)

 

結尾:時間有限這裏只是初步介紹下還未應用到項目中,後期會有完整的前端優化解決方案,若是有更好方案的大神望分享!