SquishIt——JavaScript、CSS壓縮器

    一段事件木有更新部落格了，主要是這段時間工作略忙，業餘時間又在幫個朋友做個小東西，於是也就沒去接觸新東西。今天上網的時候一個老同事（我剛出來工作時的師傅^_^）發來個網址，說是有好東西叫我看，於是看了一下，果然發現了好東西，也解決了之前我在思考的一個小問題。是一個C#.NET的組件來的，由於資料是E文的，按照慣例似懂非懂地看完然後寫點測試DEMO。這篇文章記錄一下學習成果，其實挺簡單- -！

    首先看下去哪裡拿這個組件，請 點擊這裡 跳轉到組件的......在我發這篇文章的時候最新的版本是0.7.0，所以果斷下載這個版本！是個壓縮包，解壓後可以看到裡面的東西如下（指標選中的那個東東就是我們要的組件了）：
    

    接下來我們建立一個web項目來測試之，這裡我用vs2010建立了一個asp.net4.0的web項目，看一下我們需要用到的東西：
    
    這裡我用到了兩個js檔案和兩個css檔案，其中的jquery-1.4.1.js和Site.css是建立項目的時候自動產生的，這兩個檔案裡面的內容都是沒有結果壓縮的，現在把檔案應用到頁面上來（這裡我選擇在母板Site.master裡面做），引入的代碼相當簡單，如下：html代碼?

1234	<link href="Styles/Site.css" rel="stylesheet" type="text/css" /><link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /><script src="Scripts/JScript.js" type="text/javascript"></script><script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    
    接下來運行網站，訪問Default.aspx頁面（這個頁面使用了母板Site.master），在頁面載入完成之後我們來看下頁面載入了多大的指令碼和樣式表，我使用的是chrome，如下：

    對於我們需要關注的地方我用紅色線框框出來了！可以算出這四個檔案一共是169k多一點。

    這回換成用SquishIt來引入js和css檔案，首先要把SquishIt.Framework.dll引入到項目中來（在解決方案視窗的項目頭那裡右鍵-添加引用......），接著把上面母板中那四個標籤去掉，然後換成下面的代碼來引入檔案：c#代碼?

123456789101112

<%=    SquishIt.Framework.Bundle.Css()        .Add("~/Styles/Site.css")        .Add("~/Styles/StyleSheet.css")        .Render("~/Styles/tiu_#.css")%><%=    SquishIt.Framework.Bundle.JavaScript()        .Add("~/Scripts/jquery-1.4.1.js")        .Add("~/Scripts/JScript.js")        .Render("~/Styles/tiu_#.js")%>

    上面的代碼已經相當明白了，文法什麼的就不說了，重新訪問頁面，會發現指令碼和樣式表都正常工作，在chrome的調試工具中我們發現檔案的大小還是沒有改變。到這裡這個組件只完成了引入js和css檔案的功能，重點的是壓縮功能啊！於是修改代碼如下：c#代碼?

1234567891011121314

<%=    SquishIt.Framework.Bundle.Css()        .Add("~/Styles/Site.css")        .Add("~/Styles/StyleSheet.css")        .ForceRelease()        .Render("~/Styles/tiu_#.css")%><%=    SquishIt.Framework.Bundle.JavaScript()        .Add("~/Scripts/jquery-1.4.1.js")        .Add("~/Scripts/JScript.js")        .ForceRelease()        .Render("~/Styles/tiu_#.js")%>

    
    這次我們要關注的不僅僅是檔案的大小了，還有檔案名稱，如下：

    可以看到只看到一個js檔案和css檔案，並且檔案的大小還小了很多，這就是這個組件的壓縮功能了！開啟頁面的原始碼，可以看到這兩個檔案，檔案名稱有點奇怪- -！對比一下我們發現有如下的改進：

1. 這兩個檔案的大小合起來是74.28k，記得上面那四個檔案麼，169k，可以發現壓縮後大小連一半都不到；
2. 四個檔案變成兩個，也就是說向伺服器請求的次數少了一半；

    這篇文章只是簡單記錄一下組件的使用，至於一些細節就不介紹了，再琢磨一下然後看寫成另外一篇文章^_^。使用這個組件我們可以按照我們的代碼編寫風格寫出好看的代碼，但是在使用js或者css的時候又不必為檔案壓縮發愁，更重要的是不必維護兩個版本的代碼（有壓縮和無壓縮），這就是文章開頭我提及的“解決了之前我在思考的一個小問題”！

    DEMO極其簡單，但也還是把原始碼發上來感覺比較完整，有需要的話請 點擊下載
    同事發給我的網站地址是這個：http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher