登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

用Mircrosoft AJAX Minifier帮JavaScript 瘦身  

2010-06-24 13:32:21|  分类: .net技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这个工具是随着Microsoft Ajax Library Preview 6一起被release出来的,可以到这个地方下载:http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

下载完并安装后我们可以在程式集中看到Microsoft Ajax Minifier,第一次使用建议你看一下Microsoft Ajax Minifier Documentation。

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

安装上十分的简单,不过使用时可就要稍微留意了,这个工具目前仍算阳春,只提供了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:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

根据文件说明,我们有以下几个较常用的指令可以使用:

-O:指定Minify后的档案档名,预设产出的等级为Level 2的结果(Normal-Crunching)。

-H:进行Javascript的瘦身,预设产出等级为Level 3的结果(Hyper-Crunching)。

-A:将分析过程的内容显示在Command-line画面上

接下来我们简单的进行使用吧,首先我找了一个hash.js的档案,其塬始内容为大致如下,有完整的註解与Function定义,这对开发人员很有用,但是对runtime的使用者来说并没有意义:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

接着开始来试验一下吧,先进行以下两个指令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档:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

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

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

以下则是转完后的结果,档案大小从5K-->2K,字元数从3891-->1699:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

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

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

按下Enter后它会将分析的结果印在Command-line的画面上,这是因为我们使用了-a的指令:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

以下是产出的档案,乍看之下似乎差别不大,但这一份因为我们使用了-h(Hyper-Crunching)的指令,所以会发现一些区域变数被改名成 比较简单的命名,例如:var exists-->var a,所以这份档案的大小虽然还是2K,但是其位元数为1531,比之前的1669更少:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

由于这个js档比较小,所以整个效果并没有让人感到特别惊人(5K-->2K),所以下面我们直接拿jQuery的js档来试验吧:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

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的唿叫:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

开启我们的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>  

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

以上的设定是告知专案编译时要唿叫ajaxmin.tasks,主要进行的工作是找出目录下所有的*.js档,进行完Minify后将名称命名 为*.min.js,做完以上设定后我们再开启我们的专案,这时候可能会出现以下的画面,请选择『以一般方式载入专案』,并按下确定:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

接着我们在专案中随便加入几个js档,如下:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

接着请依照一般的使用模式,按下建置,这时候到我们专案的目录下就可以看到以下的结果啰,不过这些档案并不会自动帮你加入到专案中,这个设计也不错,因为毕竟这两份js一份是在design time,另一份是run time使用,不直接被加入专案是合理的:

用Mircrosoft AJAX Minifier帮JavaScript 瘦身 - 每天积累一点 - 学无止境

结语

这个工具的使用大致如以上所述,希望对各位有帮助。

from:http://www.chinaz.com/program/.net/102O61142009.html

Microsoft Ajax Minifier Documentation

  评论这张
 
阅读(743)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018