日期:2010-02-19  浏览次数:20517 次

从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

clip_image002

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

clip_image004

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

clip_image014

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

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

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

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

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

clip_image016

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

clip_image018

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

clip_image020

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

clip_image022