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

 

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