從Web 2.0興起后，使用者對于網(wǎng)頁互動的需求愈來愈大，不僅要求使用界面美觀，也希望操作功能的友善度上能與過去的Winform程式看齊，而為了達(dá)到更良好的操作效果，程式設(shè)計師不得不在網(wǎng)頁設(shè)計上加入許多的新元素（又或者說廣泛使用一些過去比較少用的技術(shù)），其中AJAX就是一個很熱門且廣為人知的技術(shù)架構(gòu)，而眾家軟體大廠也陸續(xù)推出對應(yīng)的AJAX Framework來協(xié)助我們進(jìn)行開發(fā)，但AJAX除了帶更良好的人機(jī)操作外，也帶來了大量的Javascript，隨著我們使用的AJAX功能愈來愈多，網(wǎng)頁需要reference的Javascript file數(shù)目也愈來愈多，體積也愈來愈大，而這些改變都將反應(yīng)在使用者進(jìn)行網(wǎng)頁下載與Javascript執(zhí)行時的效率。

若你使用了ASP.NET AJAX，基本的Javascript體積約200-300KB，若你使用了AjaxPro，則基本的Javascript約為80KB，Javascript雖然都會cache，但對使用者來說，第一次操作時的體驗多少都會受到影響。

因為網(wǎng)頁流量太大，Javascript太肥等問題，實際上微軟這邊都有提供了一些還不錯的方案，將以下叁項做搭配，就可以獲得很不錯的效果：

IIS網(wǎng)頁壓縮：將IIS靜態(tài)檔案（html、CSS、JS…）、動態(tài)檔案（asp、aspx…）進(jìn)行壓縮，可大大減少網(wǎng)頁流量，壓縮比設(shè)到最高時，大約可以將流量壓到剩30%左右。

DOLOTO指令碼分析：負(fù)責(zé)分析執(zhí)行的script，只下載必要的script內(nèi)容到client，并隨著client端的需要動態(tài)到server上去取得必要的部分，可減少不必要的流量。

AJAX Minifier：Javascript瘦身工具，可以將Javascript去除不必要的字元，包含空白、換行、符號與區(qū)域變數(shù)的名稱等，可直接的讓我們的JS file變成一個全新的runtime版本。

本篇主要針對AJAX Minifier來做說明。

AJAX Minifier

這個工具是隨著Microsoft Ajax Library Preview 6一起被release出來的，可以到這個地方下載：http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488

下載完并安裝后我們可以在程式集中看到Microsoft Ajax Minifier，第一次使用建議你看一下Microsoft Ajax Minifier Documentation。

安裝上十分的簡單，不過使用時可就要稍微留意了，這個工具目前仍算陽春，只提供了Command-line模式的操作，還沒有GUI的使用介面，這也是前頭我建議各位先看看Documentation的塬因所在了，下方我們會簡單帶一下如何透過Command-line與MSBuild來使用這項好工具。

Introduction

不管使用任何工具，如果有Documentation，請務(wù)必觀看，在Introduction中我們可以看到這個工具的處理分成四個等級：

Level 1：去除空白（whitespaces）與註解（comments）

Level 2：去除不需要的分號（semicolons）與大括號（curly-braces），以下簡稱Normal-Crunching

Level 3：變更區(qū)域變數(shù)名稱，將名稱變更為簡單的名稱，以下簡稱Hyper-Crunching

Level 4：去除不會執(zhí)行到的script內(nèi)容

以上四個等級，Level 1~3可直接選擇Level 3來使用，但若要使用Level 4的話，建議你確認(rèn)一下該段script是否真的不會執(zhí)行到，以免衍生其他問題。

Command-line模式

首先我們開啟Microsoft Ajax Minifier Command Prompt：

根據(jù)文件說明，我們有以下幾個較常用的指令可以使用：

-O：指定Minify后的檔案檔名，預(yù)設(shè)產(chǎn)出的等級為Level 2的結(jié)果（Normal-Crunching）。

-H：進(jìn)行Javascript的瘦身，預(yù)設(shè)產(chǎn)出等級為Level 3的結(jié)果（Hyper-Crunching）。

-A：將分析過程的內(nèi)容顯示在Command-line畫面上

接下來我們簡單的進(jìn)行使用吧，首先我找了一個hash.js的檔案，其塬始內(nèi)容為大致如下，有完整的註解與Function定義，這對開發(fā)人員很有用，但是對runtime的使用者來說并沒有意義：

接著開始來試驗一下吧，先進(jìn)行以下兩個指令Normal-Crunching與Hyper-Crunching：

Normal-Crunching：ajaxmin C：\inetpub\wwwroot\WebSite2\hash.js –o C：\inetpub\wwwroot\WebSite2\ hash _mini_O.js

將hash.js檔透過-O（Normal-Crunching）的指令轉(zhuǎn)成hash_mini_O.js檔：

按下Enter后顯示Crunching file ‘hash.js’…Done.

以下則是轉(zhuǎn)完后的結(jié)果，檔案大小從5K-->2K，字元數(shù)從3891-->1699：

Hyper-Crunching：ajaxmin –a -h C：\inetpub\wwwroot\WebSite2\hash.js –o C：\inetpub\wwwroot\WebSite2\ hash _mini_A.js

按下Enter后它會將分析的結(jié)果印在Command-line的畫面上，這是因為我們使用了-a的指令：

以下是產(chǎn)出的檔案，乍看之下似乎差別不大，但這一份因為我們使用了-h（Hyper-Crunching）的指令，所以會發(fā)現(xiàn)一些區(qū)域變數(shù)被改名成比較簡單的命名，例如：var exists-->var a，所以這份檔案的大小雖然還是2K，但是其位元數(shù)為1531，比之前的1669更少：

由于這個js檔比較小，所以整個效果并沒有讓人感到特別驚人（5K-->2K），所以下面我們直接拿jQuery的js檔來試驗吧：

jquery1.3.1版，大小為115K，經(jīng)過-O的指令后變?yōu)?9K，經(jīng)過-H的指令后變?yōu)?3K，效果之好真的非常正點。

MSBuild模式

講完Command-line模式后我們繼續(xù)來說明MSBuild模式吧，透過Command-line模式多少還是會讓人感到有些綁手綁腳的，最好可以在佈署時就自動幫我們做掉就最好啰。

當(dāng)我們裝好Minifier后，在這Program Files/MSBuild/Microsoft/MicrosoftAjax的路徑下可以找到一個AjaxMin.tasks檔案，這是一個MSBuild專用的task檔案，在我們專案建置時會唿叫這個task來進(jìn)行Minifier的唿叫：

開啟我們的Web專案檔（*.csproj、*.vbproj），并在</Project>的結(jié)尾符號前加上這一段：

以上的設(shè)定是告知專案編譯時要唿叫ajaxmin.tasks，主要進(jìn)行的工作是找出目錄下所有的*.js檔，進(jìn)行完Minify后將名稱命名為*.min.js，做完以上設(shè)定后我們再開啟我們的專案，這時候可能會出現(xiàn)以下的畫面，請選擇『以一般方式載入專案』，并按下確定：

接著我們在專案中隨便加入幾個js檔，如下：

接著請依照一般的使用模式，按下建置，這時候到我們專案的目錄下就可以看到以下的結(jié)果啰，不過這些檔案并不會自動幫你加入到專案中，這個設(shè)計也不錯，因為畢竟這兩份js一份是在design time，另一份是run time使用，不直接被加入專案是合理的：

結(jié)語

這個工具的使用大致如以上所述，希望對各位有幫助。