現(xiàn)象

公司的項目使用webpack打包，會自動在生成的資源文件名中加入hash，防止瀏覽器緩存。
但是有一個現(xiàn)象一直很令人費(fèi)解：項目部署后，再次打開瀏覽器=>輸入url=>回車， 會發(fā)現(xiàn)加載的仍然是舊版網(wǎng)頁，只有按F5刷新后才會正常加載。

原因

經(jīng)過觀測瀏覽器network，發(fā)現(xiàn)該問題產(chǎn)生的問題如下：
當(dāng)瀏覽器向服務(wù)器發(fā)起對index.html的請求時，服務(wù)器的返回頭中沒有對緩存進(jìn)行設(shè)置，于是在瀏覽器的下一次非刷新請求時，就會自動在本地緩存中拿到之前緩存好的index.html，而且index.html中引用的資源文件也都是已經(jīng)在瀏覽器中緩存好的，所以此時瀏覽的就一定是舊版網(wǎng)站。

解決

設(shè)置Nginx配置文件中的location項即可，使其返回index.html時,自動添加不要緩存的響應(yīng)頭，這樣每次瀏覽器就都會去服務(wù)器拿最新的index.html了。
這里偷懶了，只匹配了html（返回資源路徑中存在“html”就會帶相應(yīng)的緩存響應(yīng)頭），正確一點的做法其實是“html$”，匹配html結(jié)尾的資源。

  location / {
    index index.html;
    if ($uri ~* "html") {
        add_header Cache-Control "no-cache, no-store, max-age=0, must-revalidate";
    }
  }