解決nginx服務(wù)器上發(fā)布的新版本代碼總需要清除瀏覽器緩存問(wèn)題

更新時(shí)間：2024年01月24日 16:21:53 作者：Queen_live

這篇文章主要介紹了解決nginx服務(wù)器上發(fā)布的新版本代碼總需要清除瀏覽器緩存問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問(wèn)題場(chǎng)景

代碼運(yùn)行環(huán)境：nginx
現(xiàn)象：發(fā)布新版本代碼時(shí)瀏覽器總是有上次緩存
結(jié)果：頁(yè)面顯示混亂、更新的功能還是上個(gè)版本等一系列問(wèn)題

原因

瀏覽器緩存

解決方法

1. 用戶自行清理瀏覽器緩存

優(yōu)點(diǎn)：清除瀏覽器緩存后可達(dá)到效果。
缺點(diǎn)：影響用戶體驗(yàn)

2. 使用禁用緩存標(biāo)簽，實(shí)現(xiàn)禁用瀏覽器緩存

優(yōu)點(diǎn)：可達(dá)到效果。
缺點(diǎn)：每次請(qǐng)求頁(yè)面都要重新請(qǐng)求，我們還是希望有緩存的

   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
   <meta http-equiv="Cache" content="no-cache">
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />

3. 為js和css文件添加版本號(hào)

優(yōu)點(diǎn)：可達(dá)到效果。
缺點(diǎn)：給所有的靜態(tài)資源都添加版本號(hào)參數(shù)，這個(gè)參數(shù)可以是時(shí)間戳或者隨機(jī)數(shù)。

處理方式的代碼如下：

   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/addStyle.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/template/addStyle.css?v=20200110052406" rel="external nofollow" >

4. 修改nginx 配置

（滿足以下條件后有緩存可以修改nginx 配置文件）

背景：

1、使用nginx做代理

2、使用webpack等打包出一個(gè)唯一的入口文件index.html，或者其他方式的入口html文件

3、入口html文件中js已經(jīng)使用hash后綴方式加載

=缺點(diǎn)：需要前端人員會(huì)配置nginx=

location ~ .*\.(htm|html)?$ {
 #原來(lái)這樣設(shè)置的不管用
 #expires -1;
 #現(xiàn)在改為，增加緩存
 add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
 access_log on;
}