fis3解決web網站緩存問題

爲何使用FIS3

項目上線一段時間後若是更新JS或CSS文件，而客戶端已經對該文件緩存過了，那就有可能會沒法及時更新而繼續採用舊的JS或CSS文件，沒法達到想要的效果。

　　處理相似狀況最有效的解決方案就是修改其全部的連接，這樣，請求就會從服務器下載最新的內容。可是要怎麼改呢？

一：經過query的方式添加隨機數。這樣雖然能夠保證每次都能獲取到最新的靜態資源，但即便沒有更新也會去從新下載，緩存也就失去了意義，增長了服務器的負擔。

二：經過query的方式添加時間戳或者版本號

<script type="text/javascript" src="index.js?t=20170325"></script>

<script type="text/javascript" src="index.js?v=1.0.0.0"></script>

這種解決方案非常直觀，每次更新只須要更新相關的靜態資源和頁面，作到了局部更新，減輕了服務器負擔，同時也使得瀏覽器緩存獲得了有效利用。

　　可是，若是是訪問量比較大的網站的話，仍是會面臨一些新的問題的。

一般，發佈新版本也就是發佈新的靜態資源和頁面的過程。好比：要發佈一個index.aspx的頁面，同時引入了index.js的資源。發佈新版本就是要覆蓋服務器上的這兩個文件，無論你怎麼操做，這兩個文件在覆蓋的過程當中總會產生時間間隙的，對於訪問量大的網站，在這個時間間隙內有多是會出現新的用戶訪問的，這時，錯誤就發生了，新頁面舊的靜態資源或者舊頁面新的靜態資源。因爲靜態資源是覆蓋發佈，對於使用CDN緩存的網站來講還有可能面臨CDN緩存攻擊。

 

三：基於文件內容的hash版本冗餘機制，也就是直接修改文件的URL，而不是在其後添加query

<script type="text/javascript" src="index_a5dae5b.js"></script>

其中」_a5dae5b」字符是根據index.js的文件內容進行hash運算獲得的，只有文件內容發生變化了纔會有更改。

　　 因爲不是同名覆蓋，這樣就完美的解決了發佈的間隙問題，能夠作到無縫鏈接；同時遇到問題回滾的時候只須要回滾頁面就能夠了。

 

---

 

安裝Node和NPM

運行node-v6.11.4-x64安裝文件安裝Node和NPM

安裝FIS3

運行cmd命令，執行如下安裝命令安裝FIS3

npm install -g fis3

 

安裝完成後執行 fis3 -v 判斷是否安裝成功，若是安裝成功，則顯示相似以下信息：

 

 

使用FIS3發佈MVC站點

1.編寫發佈腳本

FIS3的發佈腳本爲一個js腳本，用來控制執行發佈命令時FIS3所作的操做。發佈腳本須要放到待發佈網站文件的根目錄中。

 

// 加 md5,及靜態資源命中規則
fis.match('/Areas/CommercialTenant/Content/**.{js,css,png,jpg,gif}', {
    useHash: true,
    release: '/Static/$0'//靜態資源文件夾
});
fis.match('/Content/{Blue,Images}/**.{js,css,png,jpg,gif}', {
    useHash: true,
    release: '/Static/$0'//靜態資源文件夾
});
fis.match('/Upload/**', {
    release: false//發佈時不產出文件
});
fis.match('/Config/DaoConfig.xml', {
    release: false//發佈時不產出文件
});

fis.match('*.js}', {
    // fis-optimizer-uglify-js 插件進行壓縮，已內置
    optimizer: fis.plugin('uglify-js')
});
fis.match('*.min.js', {
    //已經壓縮過的js不進行壓縮
    optimizer: null
})
fis.match('*.css', {
    // fis-optimizer-clean-css 插件進行壓縮，已內置
    optimizer: fis.plugin('clean-css')
});


//fis.match('*.png', {
//    // fis-optimizer-png-compressor 插件進行壓縮，已內置
//    optimizer: fis.plugin('png-compressor')
//});


//// 啓用 fis-spriter-csssprites 插件
//fis.match('::package', {
//    spriter: fis.plugin('csssprites')
//});

//// 對 CSS 進行圖片合併
//fis.match('*.css', {
//    // 給匹配到的文件分配屬性 `useSprite`
//    useSprite: true
//});


//// 啓用插件
//fis.hook('relative');
//// 讓全部文件，都使用相對路徑。
//fis.match('**', {
//    relative: true
//})

View Code

 

此名爲MyWeb的文件夾爲使用VS2013文件發佈的網站站點文件夾，其中的fis-conf文件爲FIS3發佈文件。

關於fis-conf配置文件的編寫，請參考http://fis.baidu.com/fis3/docs/beginning/intro.html

 

2.將待發佈網站文件上傳到服務器，並將編寫好的發佈腳本放到待發布的網站文件根目錄中。

如：本機網站目錄文件在d:\MyWeb中，在服務器上的「D:\待發佈網站文件」下建立一個目錄命名爲WaitPublishWeb。

則將本機d:\MyWeb目錄中的網站文件拷貝到服務器上D:\待發佈網站文件\WaitPublishWeb中。fis-conf文件也拷貝到D:\待發佈網站文件\WaitPublishWeb中。

 

1. 按照文檔《fis3發佈.net到iis上亂碼》配置fis3源代碼，不對webconfig作配置，webconfig的配置在源代碼中已作好。

操做步驟：

1：cmd 輸入：npm root -g 定位到文件夾下 lib\util.js 中

註釋

if (buffer.charCodeAt(0) === 0xFEFF)

{

buffer = buffer.substring(1);

}

2：打開iis 「.NET 全球化」-編碼-文件-gb2312 改成UTF-8

 

4.運行cmd命令，進入"D:\待發佈網站文件\WaitPublishWeb"目錄，運行發佈命令,命令格式爲fis3 release -d D:\output  

命令中的D:\output修改成發佈目標網站目錄，如201環境中的發佈目標網站目錄爲E:\WebSite\Eplus365。則命令爲fis3 release -d E:\WebSite\Eplus365.

 

成功了！