用Mircrosoft AJAX Minifier幫JavaScript 瘦身

來源:互聯網
上載者:User

這個工具是隨著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,請務必觀看,在Introduction中我們可以看到這個工具的處理分成四個等級:

Level 1:去除空白(whitespaces)與註解(comments)

Level 2:去除不需要的分號(semicolons)與大括弧(curly-braces),以下簡稱Normal-Crunching

Level 3:變更地區變數名稱,將名稱變更為簡單的名稱,以下簡稱Hyper-Crunching

Level 4:去除不會執行到的script內容

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

Command-line模式

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

根據檔案說明,我們有以下幾個較常用的指令可以使用:

-O:指定Minify後的檔案檔名,預設產出的等級為Level 2的結果(Normal-Crunching)。

-H:進行Javascript的瘦身,預設產出等級為Level 3的結果(Hyper-Crunching)。

-A:將分析過程的內容顯示在Command-line畫面上

接下來我們簡單的進行使用吧,首先我找了一個hash.js的檔案,其原始內容為大致如下,有完整的註解與Function定義,這對開發人員很有用,但是對runtime的使用者來說並沒有意義:

接著開始來實驗一下吧,先進行以下兩個指令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)的指令轉成hash_mini_O.js檔:

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

以下則是轉完後的結果,檔案大小從5K-->2K,字元數從3891-->1699:

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

按下Enter後它會將分析的結果印在Command-line的畫面上,這是因為我們使用了-a的指令:

以下是產出的檔案,乍看之下似乎差別不大,但這一份因為我們使用了-h(Hyper-Crunching)的指令,所以會發現一些地區變數被改名成比較簡單的命名,例如:var exists-->var a,所以這份檔案的大小雖然還是2K,但是其位元數為1531,比之前的1669更少:

由於這個js檔比較小,所以整個效果並沒有讓人感到特別驚人(5K-->2K),所以下面我們直接拿jQuery的js檔來實驗吧:

jquery1.3.1版,大小為115K,經過-O的指令後變為69K,經過-H的指令後變為53K,效果之好真的非常正點。

MSBuild模式

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

當我們裝好Minifier後,在這Program Files/MSBuild/Microsoft/MicrosoftAjax的路徑下可以找到一個AjaxMin.tasks檔案,這是一個MSBuild專用的task檔案,在我們專案建置時會呼叫這個task來進行Minifier的呼叫:

開啟我們的Web專案檔(*.csproj、*.vbproj),並在</Project>的結尾符號前加上這一段:

以下為引用的內容:

  1. <Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />  
  2. <Target Name="AfterBuild">  
  3.   <ItemGroup>  
  4.     <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />  
  5.   </ItemGroup>  
  6.   <AjaxMin SourceFiles="@(JS)" SourceExtensionPattern="\.js$" TargetExtension=".min.js" />  
  7. </Target>  

以上的設定是告知專案編譯時間要呼叫ajaxmin.tasks,主要進行的工作是找出目錄下所有的*.js檔,進行完Minify後將名稱命名為*.min.js,做完以上設定後我們再開啟我們的專案,這時候可能會出現以下的畫面,請選擇『以一般方式載入專案』,並按下確定:

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

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.