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

若你使用了ASP.NET AJAX,基本的Javascript体积约200-300KB,若你使用了AjaxPro,则基本的Javascript约为80KB,Javascript虽然都会cache,但对使用者来说,第一次操作时的体验多少都会受到影响。

因为网页流量太大,Javascript太肥等问题,实际上微软这边都有提供了一些还不错的方案,将以下叁项做搭配,就可以获得很不错的效果:

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

DOLOTO指令码分析:负责分析执行的script,只下载必要的script内容到client,并随着client端的需要动态到server上去取得必要的部分,可减少不必要的流量。

AJAX Minifier:Javascript瘦身工具,可以将Javascript去除不必要的字元,包含空白、换行、符号与区域变数的名称等,可直接的让我们的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,请务必观看,在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使用,不直接被加入专案是合理的:

原文地址:http://www.chinaz.com/Program/.NET/102O61142009.html

转载于:https://www.cnblogs.com/zhaozhan/archive/2010/12/02/1894962.html

【转】用Microsoft Ajax Minifier帮你的Javascript瘦身相关推荐

  1. [前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化

    在前端优化中,js.css等文件的优化一般都是压缩的优化,进行合并.减小体积以达到减小请求的目的. 今天发现了一个集成在VS中的压缩插件,使得压缩变得比较快捷. 配置方法 首先需要去下载Microso ...

  2. 深入了解 Microsoft AJAX Library (转自msdn,觉得不错)

    深入了解 Microsoft AJAX Library Dino Esposito 代码下载位置: CuttingEdge2007_12.exe (152 KB) Browse the Code On ...

  3. 《ASP.NET AJAX程序设计——第II卷:客户端Microsoft AJAX Library相关》前言

    章节列表:http://www.cnblogs.com/dflying/archive/2007/05/18/751741.html 在最近的一年以及今后的三五年内,我们有理由相信Web应用程序将受到 ...

  4. 《ASP.NET AJAX程序设计——第II卷:客户端Microsoft AJAX Library与异步通讯层》前言...

    在最近的一年以及今后的三五年内,我们有理由相信Web应用程序将受到更多开发者和用户的青睐.作为领路人Google的一系列基于Web的产品完全地颠覆了传统的网页概念,让用户甚至不敢相信基于浏览器的程序竟 ...

  5. 使用 Microsoft Ajax Library 创建自定义客户端脚本

    MSDN地址:http://msdn.microsoft.com/zh-CN/library/bb386453.aspx Microsoft Ajax Library是微软提供的一套基于客户端的Aja ...

  6. 实例讲解《Microsoft AJAX Library》(2):DomEvent类

    引言: 大家都知道Ajax的之所以能如此丰富地实现,客户端脚本功不可没.而像Asp.Net Ajax这般庞大的工程,没有脚本类库的支撑是很难想象的.<Microsoft AJAX Library ...

  7. ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)

    AJAX的好处就是不会堵塞页面,可以提高用户体验,可以减少数据传输尺寸,提高应用程序的性能.目前,AJAX技术可以说是已经成为WEB开发的标准技术. AJAX技术是纯客户端技术,任何客户端框架(如:M ...

  8. ASP.NET AJAX深入浅出系列课程(10):基于Microsoft AJAX Library扩展客户端组件.zip(10.77 MB)...

    讲座内容: 利用面向对象类型系统是扩展组件的常用方法,但是我们在客户端进行开发的时候也不能忘记正在使用的是JavaScript这个非常灵活的动态语言,使用一些特殊的方式来扩展组件有时候会得到更好的效果 ...

  9. [导入]ASP.NET Ajax程序设计第II卷:客户端Microsoft Ajax Library与异步通信层及源代码.zip(101.50 MB)...

    ASP.NET Ajax程序设计第II卷:客户端Microsoft Ajax Library与异步通信层及源代码 文章来源:http://www.isheu.com/data_8435_2.aspx ...

最新文章

  1. C++对象的内存布局1---基础篇----C++ 虚函数表解析
  2. DHCP Client 无法启动 拒绝访问
  3. centos安装mysql wsl_如何在 Windows 10 中安装 WSL2 的 Linux 子系统
  4. 还在犹豫吗?现在参与 OCM 社区正是时候
  5. 微信和html5的使用感觉,微信小程序和HTML5相比有何不同呢?
  6. spring项目的 WebApplicationContext 初始化两次的解决方法
  7. 使用ASP.NET Core 3.x 构建 RESTful API - 1. 开始
  8. Android之二维码扫描的总结
  9. 超越传感器和相机 - 将物联网从云端迁移到物理世界
  10. java 注解 jpa_详解Spring Data JPA使用@Query注解(Using @Query)
  11. R语言的常用函数速查
  12. markdown内容转wiki格式内容
  13. android权限名及其用途
  14. 计算机专业sci二区论文难吗,二区SCI论文要求比国内核心高吗
  15. html5 live,HTML5 live streaming
  16. R 回归 虚拟变量na_互助问答第92期:虚拟变量问题
  17. react-navigation之navigate
  18. (转)屈子:独立人格可与日月争光
  19. 感冒发烧都能报?小额医疗险了解下!
  20. 使用Charles 抓取数据包

热门文章

  1. 【案例实战】餐饮企业分店财务数据分析系统解决方案:业务需求
  2. docker基础学习中遇到的一些问题
  3. 帆软报表重要Activator之DesignerInitActivator之五CenterRegionContainerPane设计器的表格区域
  4. android 图片墙拼贴,三步搞定 用APP打造图片文字拼贴效果
  5. tableau无法建立连接_欧普照明利用 Tableau 解放数字化人才,助力企业数字化转型...
  6. python3.7 matplotlib增加坐标说明_python matplotlib:如何在极坐标图中的轴和刻度标签之间插入更多空格?...
  7. 3d建模电脑配置要求_专业3d动画建模需要什么配置 运行Blender的电脑配置推荐
  8. Batch入门教程(1)
  9. tqdm模块不能单行输出问题
  10. 中文信息处理(四)—— 神经网络基础