用Microsoft Ajax Minifier帮你的Javascript瘦身

核心提示：摘要 前两天在Plurk上看到91哥在谈这个工具，1时兴起之下就稍为玩了1下，发现还蛮有趣的，以下先容给大家参考看看。

摘要 前两天在Plurk上看到91哥在谈这个工具，1时兴起之下就稍为玩了1下，发现还蛮有趣的，以下先容给大家参考看看。

从Web 2.0兴起后，使用者对网页互动的需求越来越大，不但要求使用界面美观，也希看操纵功能的友善度上能与过往的Winform程式看齐，而为了到达更良好的操纵效果，程式设计师不能不在网页设计上加进很多的新元素（又或说广泛使用1些过往比较少用的技术），其中AJAX就是1个很热门且广为人知的技术架构，而众家软体大厂也陆续推出对应的AJAX Framework来协助我们进行开发，但AJAX除带更良好的人机操纵外，也带来了大量的Javascript，随着我们使用的AJAX功能越来越多，网页需要reference的Javascript file数目也越来越多，体积也越来越大，而这些改变都将反应在使用者进行网页下载与Javascript履行时的效率。

若你使用了ASP.NET AJAX，基本的Javascript体积约200⑶00KB，若你使用了AjaxPro，则基本的Javascript约为80KB，Javascript固然都会cache，但对使用者来讲，第1次操纵时的体验多少都会遭到影响。

由于网页流量太大，Javascript太肥等题目，实际上微软这边都有提供了1些还不错的方案，将以下叁项做搭配，便可以够取得很不错的效果：

IIS网页紧缩：将IIS静态档案（html、CSS、JS…）、动态档案（asp、aspx…）进行紧缩，可大大减少网页流量，紧缩比设到最高时，大约可以将流量压到剩30%左右。

DOLOTO指令码分析：负责分析履行的script，只下载必要的script内容到client，并随着client真个需要动态到server上往取得必要的部份，可减少没必要要的流量。

AJAX Minifier：Javascript瘦身工具，可以将Javascript往除没必要要的字元，包括空缺、换行、符号与区域变数的名称等，可直接的让我们的JS file变成1个全新的runtime版本。

本篇主要针对AJAX Minifier来做说明。

AJAX Minifier

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

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

安装上10分的简单，不过使用时可就要稍微留意了，这个工具目前仍算阳春，只提供了Command-line模式的操纵，还没有GUI的使用介面，这也是前头我建议各位先看看Documentation的塬因所在了，下方我们会简单带1下如何透过Command-line与MSBuild来使用这项好工具。

Introduction

不管使用任何工具，假设有Documentation，请务必观看，在Introduction中我们可以看到这个工具的处理分成4个等级：

Level 1：往除空缺（whitespaces）与註解（comments）

Level 2：往除不需要的分号（semicolons）与大括号（curly-braces），以下简称Normal-Crunching

Level 3：变更区域变数名称，将名称变更加简单的名称，以下简称Hyper-Crunching

Level 4：往除不会履行到的script内容

以上4个等级，Level 1~3可直接选择Level 3来使用，但如果要使用Level 4的话，建议你确认1下该段script是否是真的不会履行到，以免衍生其他题目。

Command-line模式

首先我们开启Microsoft Ajax Minifier Command Prompt：

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

-O：指定Minify后的档案档名，预设产出的等级为Level 2的结果（Normal-Crunching）。

-H：进行Javascript的瘦身，预设产出等级为Level 3的结果（Hyper-Crunching）。

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

接下来我们简单的进行使用吧，首先我找了1个hash.js的档案，其塬始内容为大致以下，有完全的註解与Function定义，这对开发职员很有用，但是对runtime的使用者来讲并没故意义：

接着开始来实验1下吧，先进行以下两个指令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的指令：

以下是产出的档案，乍看之下仿佛差别不大，但这1份由于我们使用了-h（Hyper-Crunching）的指令，所以会发现1些区域变数被改名成比较简单的命名，例如：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的路径下可以找到1个AjaxMin.tasks档案，这是1个MSBuild专用的task档案，在我们专案建置时会唿叫这个task来进行Minifier的唿叫：

开启我们的Web专案档（*.csproj、*.vbproj），并在的结尾符号前加上这1段：

以下为援用的内容： <Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />   <Target Name="AfterBuild">     <ItemGroup>       <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />     ItemGroup>     <AjaxMin SourceFiles="@(JS)" SourceExtensionPattern="\.js$" TargetExtension=".min.js" />   Target>

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

接着我们在专案中随便加进几个js档，以下：

接着请依照1般的使用模式，按下建置，这时候候到我们专案的目录下便可以够看到以下的结果啰，不过这些档案其实不会自动帮你加进到专案中，这个设计也不错，由于究竟这两份js1份是在design time，另1份是run time使用，不直接被加进专案是公道的：

结语

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

唐山网站建设www.fw8.net

TAG:工具,模式,档案,指令,专案

评论加载中... 内容： 评论者： 验证码：