項目上線(xiàn)一段時(shí)間后如果更新JS或CSS文件，而客戶(hù)端已經(jīng)對該文件緩存過(guò)了，那就有可能會(huì )無(wú)法及時(shí)更新而繼續采用舊的JS或CSS文件，無(wú)法達到想要的效果。
處理類(lèi)似情況最有效的解決方案就是修改其所有的鏈接，這樣，請求就會(huì )從服務(wù)器下載最新的內容。但是要怎么改呢？
一：通過(guò)query的方式添加隨機數。這樣雖然可以保證每次都能獲取到最新的靜態(tài)資源，但即使沒(méi)有更新也會(huì )去重新下載，緩存也就失去了意義，增加了服務(wù)器的負擔。
二：通過(guò)query的方式添加時(shí)間戳或者版本號
<script type="text/javascript" src="index.js?t=20170325"></script>
<script type="text/javascript" src="index.js?v=1.0.0.0"></script>
這種解決方案很是直觀(guān)，每次更新只需要更新相關(guān)的靜態(tài)資源和頁(yè)面，做到了局部更新，減輕了服務(wù)器負擔，同時(shí)也使得瀏覽器緩存得到了有效利用。
但是，如果是訪(fǎng)問(wèn)量比較大的網(wǎng)站的話(huà)，還是會(huì )面臨一些新的問(wèn)題的。
通常，發(fā)布新版本也就是發(fā)布新的靜態(tài)資源和頁(yè)面的過(guò)程。比如：要發(fā)布一個(gè)index.aspx的頁(yè)面，同時(shí)引入了index.js的資源。發(fā)布新版本就是要覆蓋服務(wù)器上的這兩個(gè)文件，不管你怎么操作，這兩個(gè)文件在覆蓋的過(guò)程中總會(huì )產(chǎn)生時(shí)間間隙的，對于訪(fǎng)問(wèn)量達的網(wǎng)站，在這個(gè)時(shí)間間隙內有可能是會(huì )出現新的用戶(hù)訪(fǎng)問(wèn)的，這時(shí)，錯誤就發(fā)生了，新頁(yè)面舊的靜態(tài)資源或者舊頁(yè)面新的靜態(tài)資源。由于靜態(tài)資源是覆蓋發(fā)布，對于使用CDN緩存的網(wǎng)站來(lái)說(shuō)還有可能面臨CDN緩存攻擊。
三：基于文件內容的hash版本冗余機制，也就是直接修改文件的URL，而不是在其后添加query
<script type="text/javascript" src="index_a5dae5b.js"></script>
其中”_a5dae5b”字符是根據index.js的文件內容進(jìn)行hash運算得到的，只有文件內容發(fā)生變化了才會(huì )有更改。
由于不是同名覆蓋，這樣就完美的解決了發(fā)布的間隙問(wèn)題，可以做到無(wú)縫連接；同時(shí)遇到問(wèn)題回滾的時(shí)候只需要回滾頁(yè)面就可以了。
但是要怎么來(lái)實(shí)現呢？
于是我問(wèn)了下度娘(谷歌每次都得FQ，慢還麻煩，先問(wèn)度娘，解決不了在出墻去)，這次居然靠譜的找到了FIS，百度的一個(gè)開(kāi)源的前端工程構建工具。
FIS的功能還是很強大的，而且文檔很詳細，而且還是中文…至于怎么安裝和使用，http://fis.baidu.com/fis3/index.html這里你想要的都有。需要先安裝node和npm。
我本地node的安裝版本是v6.9.5，npm安裝版本v3.10.10，FIS的安裝版本是v3.4.32
由于是第一次接觸FIS，所以先用一點(diǎn)簡(jiǎn)單的功能，添加MD5戳和壓縮資源，配置文件如下：
fis.match('*.{js,css}', {
useHash: true
});
fis.match('*.js', {
// fis-optimizer-uglify-js 插件進(jìn)行壓縮，已內置
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
// fis-optimizer-clean-css 插件進(jìn)行壓縮，已內置
optimizer: fis.plugin('clean-css')
});
fis.match('*.png', {
// fis-optimizer-png-compressor 插件進(jìn)行壓縮，已內置
optimizer: fis.plugin('png-compressor')
});
release完了之后用visual studio發(fā)布報錯：常量中有換行符。我發(fā)現凡是涉及到這個(gè)錯誤的有一個(gè)共同點(diǎn)就是都存在中文或者中文字符。于是我想到應該是編碼的問(wèn)題。于是我把文件編碼格式改成了utf-8，再次編譯順利通過(guò)。
但是發(fā)布部署之后瀏覽發(fā)現所有的靜態(tài)資源都沒(méi)有正常加載，看了一下源代碼，發(fā)現通過(guò)FIS release之后已經(jīng)默認都改成了絕對路徑。不行讓它用絕對路徑怎么辦？
我去找了一下文檔，發(fā)現FIS的插件中有個(gè)是可以讓產(chǎn)出能夠支持相對路徑的插件：fis3-hook-relative。具體安裝使用https://github.com/fex-team/fis3-hook-relative
修改剛才的配置文件，在原來(lái)的基礎上啟用該插件，完整的配置文件如下：
// 讓所有文件，都使用相對路徑。
fis.match('**', {
relative: true
})
//加 md5
fis.match('*.{js,css}', {
useHash: true
});
fis.match('*.js', {
// fis-optimizer-uglify-js 插件進(jìn)行壓縮，已內置
optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
// fis-optimizer-clean-css 插件進(jìn)行壓縮，已內置
optimizer: fis.plugin('clean-css')
});
fis.match('*.png', {
// fis-optimizer-png-compressor 插件進(jìn)行壓縮，已內置
optimizer: fis.plugin('png-compressor')
});
release之后發(fā)布部署，一切恢復正常?。?！這樣既很好的解決了JS或者CSS緩存的問(wèn)題！
因為添加MD5戳是根據文件內容生成的，所以完全不必擔心手工替換時(shí)會(huì )漏掉的頁(yè)面，一個(gè)命令就自動(dòng)幫你解決了這些問(wèn)題。
FIS還支持Glob語(yǔ)法擴展，更擴展了分組功能，進(jìn)行文件匹配的時(shí)候真正使簡(jiǎn)單易容~吼吼
聯(lián)系客服
