[FE] 靜態(tài)資源的部署方案

(1)無緩存部署

index.html

<link rel="stylesheet" href="a.css" />
<div class="foo">foo</div>

a.css

.foo{
    color:red;
}

問題:浪費帶寬

(2)304協(xié)商緩存

問題:還是要和服務器通信一次

(3)強制本地緩存

<u></u>cache-control/expires,不要和服務器通信
問題:無法更新資源

(4)通過更新資源的查詢參數(shù),更新緩存

index.html

<link rel="stylesheet" href="a.css?v=1.0.0" />
<div class="foo">foo</div>

問題:沒有改變的資源也要同時更新
index.html

<link rel="stylesheet" href="a.css?v=1.0.1" />
<link rel="stylesheet" href="b.css?v=1.0.1" />
<link rel="stylesheet" href="c.css?v=1.0.1" />

(5)用數(shù)據(jù)摘要算法設置查詢參數(shù)值

index.html

<link rel="stylesheet" href="a.css?v=0abc23" />
<link rel="stylesheet" href="b.css?v=e2fc94" />
<link rel="stylesheet" href="c.css?v=11dbf5" />

問題:包含靜態(tài)資源的CDN節(jié)點,部署順序問題
index.html

<link rel="stylesheet"  />

a.css

.foo{
    color:red;
}

先部署index.html,
則訪問者會請求并緩存舊的a.css,頁面錯亂,再部署a.css也沒有用了

先部署a.css,
有緩存的訪問者頁面不變,等部署了新index.html,統(tǒng)一更新
沒有緩存的訪問者會用舊頁面加載新樣式表,樣式錯亂,再部署新index.html,恢復正常

(6)采用非覆蓋式發(fā)布

用數(shù)據(jù)摘要算法命名文件,新建一個更新的文件。
舊的資源a_0abc23.css,新的資源a_f02bc2.css

部署時,先上傳新的資源a_f02bc2.css,再覆蓋index.html

問題:該資源被其他資源引用的地址都得相應調(diào)整。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容