首頁 > web前端 > Vue.js > 主體

淺析Vue中入口快取的問題(程式碼分享)

奋力向前
發布: 2021-08-24 11:56:52
轉載
1728 人瀏覽過

之前的文章《你值得了解的HTTP快取機制(程式碼詳解)》中,給大家了解了HTTP快取機制。下面這篇文章給大家了解Vue中入口快取的問題,夥伴們來看看。

淺析Vue中入口快取的問題(程式碼分享)

關於web的快取策略,推薦這篇文章:Http快取機制

在開發時候常常遇到一個問題,我們根據版本號去控制快取問題,當我們發布新版本,使用心得版本號的時候,發現html裡面引用的版本號卻是舊的版本號,原來是該html檔案被快取了,很多時候我們設定禁止html檔案被快取,但還是會出現被快取的情況。

<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache" content="no-cache" />
登入後複製

為什麼我們有時候設定了<meta http-equiv=”Cache-control”content=”no-store”>這種強制性禁止快取,我們的頁面依然被緩存了?

因為我們只關注了客戶端,卻忽略了伺服器端的設置,如果伺服器端nginx設定了Cache-control,他是會覆蓋掉我們頁面中設定的的Cache-control的,所以有時候我們會發現明明cssjs已經加了版本號,但是html檔案裡面引用的依然是舊的 cssjs

一旦我們使用了全量更新,也就是每次發版本之前會幹掉之前的jscss文件,那麼index.html會無法載入先前的jscss還有一些其他的靜態資源文件,而新的js css則不會被載入, 那麼白螢幕就誕生了。

因為伺服器的快取機制,舊的cssjs並不會被立即刪除,這種情況下, 需要配合伺服器來設定緩存,以nginx為例

location / {
    root /home/www/test/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
    add_header Last-Modified $date_gmt;
    add_header Cache-Control &#39;no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0&#39;;
    if_modified_since off;
    expires off;
    etag off;
}
登入後複製

no-cache,no-store可以只設定一個

no-cache瀏覽器會快取,但刷新頁面或重新開啟時會請求伺服器,伺服器可以回應304,如果檔案有改變就會回應200

##no-store 瀏覽器不緩存,刷新頁面需要重新下載頁

推薦學習:

vue.js教學

以上是淺析Vue中入口快取的問題(程式碼分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:chuchur.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板