原文地址：https://juejin.cn/post/7129829677484474376
微信瀏覽器緩存
做前端開發(fā)的小伙伴肯定都經(jīng)歷過，項目升級后循榆，原本公眾號內(nèi)的鏈接析恢，訪問進去白屏了，有些人甚至刷新都沒有效果秧饮，在生產(chǎn)環(huán)境中這可是個大問題映挂。
很多小伙伴說給 url 加版本號或者時間戳泽篮，在某些瀏覽器實現(xiàn)忽略參數(shù)的情況下，也依然起不到很好的效果柑船。
歸根結(jié)底就是前端資源被微信瀏覽器強緩存了帽撑。
現(xiàn)在大多前端項目都是用一些主流的打包工具進行打包，例如：webpack鞍时、rollup 等亏拉，我們的 js、css 文件都可以在打包的時候設(shè)置帶有 hash 值的文件名逆巍，對于瀏覽器來說及塘，資源地址變了，就可以有效的規(guī)避掉緩存問題蒸苇。
但是磷蛹，拿 Vue 項目為例，入口文件 index.html 這個文件是不會變得溪烤，但是里面引入的 js味咳、css 會隨著打包的變化而變化，這就導致之前說的檬嘀，白屏問題槽驶。
白屏問題分析
由于第一次發(fā)布時沒有配置 Cache-Control：no-cache ，觸發(fā)了瀏覽器默認緩存靜態(tài)資源的策略：
max-age =（你訪問的時間 - 最后一次修改時間）/ 10
所以鸳兽，這就造成 index.html 文件還是老的掂铐，但是 js、css 文件都更新了揍异，由于這些資源文件都帶 hash全陨，所以服務(wù)端這邊資源就訪問不到了，導致頁面白屏衷掷。
瀏覽器的緩存資源流程
強緩存：不會和服務(wù)器交互辱姨，不會發(fā)起請求
協(xié)商緩存：會和服務(wù)器交互，來判斷資源有沒有變化
這張圖就很清晰的表達了整個瀏覽器緩存命中的過程戚嗅，而我們之前的問題正式命中了瀏覽器的強緩存雨涛。
而強緩存的特點就是：強緩存發(fā)現(xiàn)資源未過期時，會直接返回 200 (from memory cache 或者 disk cache)懦胞。目的本身是為了減少網(wǎng)絡(luò)請求的時間消耗而實現(xiàn)頁面快速加載替久，但是用不好，也是一個雙刃劍啊躏尉，尤其是單頁面應(yīng)用需要經(jīng)常發(fā)布的場景下蚯根。
如何解決？
既然了解了瀏覽器的緩存機制胀糜，也了解了問題的原因颅拦，那么解決辦法就很明顯了吼具。
一句話，想辦法讓客戶端請求一次服務(wù)端把新的資源拿到矩距！
- 如果是直接請求
*.html的方式，可以考慮文件名后增加隨機數(shù)或者時間戳怖竭，url 的變更會觸發(fā)重新請求锥债。但是，如果是通過nginx轉(zhuǎn)發(fā)訪問到index.html的情況痊臭，我試過但線上依然會有白屏的案例出現(xiàn)哮肚，因為畢竟是get請求text/html文本資源。 - 給原項目增加
path广匙，類似xxx.com/#/改為xxx.com/nocache/#/這種方式允趟，確保瀏覽器會重新發(fā)起請求。
當然鸦致，以上的方案都是治標不治本潮剪，屬于補救措施。
其實分唾，我們可以使用協(xié)商緩存與強緩存配合的方式抗碰，來達到客戶端既能及時響應(yīng)，又可以在未發(fā)布時提高加載效率绽乔。
如何避免弧蝇？
我們可以利用協(xié)商緩存的機制來處理入口文件 index.html 和一些圖片資源，在其更新之后立即拉取折砸，未更新時返回 304 來命中緩存看疗。
其余的文件資源（js、css睦授、json两芳、字體文件等）則可以采用周期強緩存，這個周期可以選平均發(fā)版周期或半個發(fā)版周期這樣睹逃，來減少 http 請求連接數(shù)盗扇。
至于如何激活協(xié)商緩存，那就是文章開頭提到的：Cache-Control: no-cache沉填。
關(guān)于Cache-Control疗隶，本文不做進一步介紹，有興趣的小伙伴可以前往 MDN查看翼闹。
最后
很多項目工程中遇到的問題斑鼻，不單單是前端開發(fā)本身的問題，我們依然需要了解包括代碼運行環(huán)境猎荠，計算機網(wǎng)絡(luò)等很多相關(guān)知識才可以解決坚弱。
保證基本功的同時蜀备，也多多了解其他相關(guān)知識才能幫助我們在這條路上走的更遠~
PS：開發(fā)過程中遇到的各種問題都建議做一下筆錄哦~
時間久了你會感謝自己的~
