首页 > 语言 > 关键词  > AJAX最新资讯  > 正文

用Microsoft Ajax Minifier帮你的Javascript瘦身

2009-10-27 16:24 · 稿源:gipi的学习笔记

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

从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出来的,可以到这个地方下载:https://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. <ImportProject="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks"/>
  2. <TargetName="AfterBuild">
  3. <ItemGroup>
  4. <JSInclude="**\*.js"Exclude="**\*.min.js;Scripts\*.js"/>
  5. </ItemGroup>
  6. <AjaxMinSourceFiles="@(JS)"SourceExtensionPattern="\.js$"TargetExtension=".min.js"/>
  7. </Target>

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

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

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

结语

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

举报

  • 相关推荐
  • 从管理工具向“增长伙伴”蜕变 Agent重构CRM价值体系

    销售易在腾讯云城市峰会上发布中国首款AI+CRM产品NeoAgent,标志着CRM系统从流程化工具向智能化伙伴转型。该产品通过智能录入、场景赋能和自然交互三大功能,实现从被动执行到主动辅助的跨越。NeoAgent依托语音识别、对话解析等技术,能自动提取客户需求等关键信息并结构化存储,大幅降低操作成本。同时打破传统CRM菜单层级限制,通过语音或文字指令快速获取数据,响应速度提升80%以上。产品深度整合企业销售方法论与客户数据,为具体场景提供精准建议,并通过"湖仓一体"数据平台确保信息实时更新。其每月迭代机制紧密依赖业务场景,已成功应用于客户画像、渠道管理等场景,形成"试用-反馈-迭代-转化"闭环。

  • OpenAI发布ChatGPT Agent智能体:支持写代码、做PPT、分析金融

    OpenAI推出ChatGPT智能体,整合网页交互、数据搜索与多模态协作功能,可完成代码生成、PPT制作、金融分析等复杂任务。该智能体融合Operator的网页自动化操作、Deep Research的数据分析能力及优化后的GPT-4对话引擎三大核心模块。目前面向付费用户开放,Pro版近乎无限使用,其他版本每月限50次任务。OpenAI承认其仍存在金融建模需人工验证、非英语文本解析准确率低等技术局限,并

  • A日报:Kimi开放平台上线Kimi Playground;OpenAI重磅发布ChatGPT Agent;Suno推人声替换功能

    【AI日报】汇总了近期AI领域重要进展:1)月之暗面推出Kimi Playground平台,实现从对话助手到智能助理的转变;2)OpenAI发布ChatGPT Agent,支持自主执行浏览、购物等任务;3)Suno发布v4.5+版本,新增人声替换等音乐创作功能;4)谷歌Veo3视频生成模型上线,支持文本转视频;5)全球首个直播流扩散模型MirageLSD发布,实现实时视频转换;6)VSCode编程助手Traycer提升大型代码库处理效率;7)ART框架支持Python一键训练AI Agent;8)NVIDIA语音识别模型Canary-Qwen-2.5B词错率创新低;9)Mistral AI推出Le Chat挑战ChatGPT;10)百度小度上线首个支持物理交互的MCP Server;11)Lightricks的LTXV模型实现60秒高质量视频生成;12)开源模型LTX-Video13B支持30倍速高清视频生成。

  • AI日报:美图发布影像AI Agent RoboNeo;1.8bit量化Kimi K2模型上线;亚马逊推AI代码编辑器 Kiro

    【AI日报】今日AI领域重要动态:1)美图推出RoboNeo,通过自然语言指令实现图片精修、品牌设计等全能影像处理;2)Unsloth AI将Kimi K2模型量化至1.8bit,体积缩减78%保持性能;3)谷歌Gemini嵌入模型登顶MTEB榜单,超越OpenAI;4)亚马逊发布免费AI代码编辑器Kiro,集成Claude模型;5)Claude新增应用工具目录功能提升工作效率;6)MiniMax完成近3亿美元融资,估值超40亿美元;7)UTCP新协议让AI代理直

  • 千元标杆!REDMI Note 15 Pro系列入网

    REDMI Note 15 Pro系列已经入网,支持90W快充。 同时他还透露,新系列可能会带来1.5K OLED新形态屏幕、防水抗摔升级、扬声器升级、更大电池更轻,还有望搭载全新的骁龙7系平台。 REDMI Note系列目前已经与Turbo系列进行分割,Note系列专注于品质,尤其Pro系列是同级标杆,普及高端机上的曲面屏、防水防尘、防摔等等。 去年Note 14Pro系列就支持IP66 IP68 IP69满级防水,并且拥有双曲面1

  • 果粉期待五年新品终于有消息!苹果HomePod mini 2有望今年底发布

    苹果于2020年10月推出了第一代HomePod mini,凭借其小巧的体积、出色的音质以及对Siri语音助手和HomeKit智能家居控制的支持,赢得了众多果粉的喜爱。 不过自发布以来,HomePod mini的核心硬件一直维持在五年前的水平,这让许多用户对其升级换代充满期待。 据Mark Gurman最新透露,苹果计划在今年底推出第二代HomePod mini,预计发布时间将在9月iPhone发布会之后至11月之间。 新一代产�

  • 王腾:REDMI Turbo 4 Pro非常成功 很多友商都在关注

    REDMI总经理王腾发文表示,REDMI上半年发布的Turbo 4 Pro非常成功,受到了广大用户的喜爱,也收到了很多友商的关注。 据悉,REDMI Turbo 4 Pro于4月份发布,首发起售价是1999元,该机上市不到一个月累计销量突破100万台,成为行业内最火的Turbo手机。 随着REDMI Turbo系列的热销,各大品牌纷纷推出Turbo系列手机,主打高性能,对此王腾表示,领先的一种体现就是被模仿,说明REDMI这几�

  • AI日报:通义开源AI编程大模型Qwen3-Coder;​360将推智能眼镜和AI录音笔;谷歌发布Gemini 2.5 Flash-Lite 稳定版

    本文介绍了AI领域多项重要进展:1)谷歌发布Gemini 2.5 Flash-Lite稳定版,平衡速度与成本;2)腾讯混元ASR语音大模型接入ima平台;3)阿里开源Qwen3-Coder编程大模型;4)360将推智能眼镜和AI录音笔;5)夸克健康大模型通过医师评测;6)零一万物发布企业级大模型平台;7)Hedra推出低成本AI视频代理;8)Gemini2.5革新图像理解能力;9)Meta推出创新文本处理模型AU-Nets;10)苹果AI团队或寻求第三方合

  • RestCloud荣登Gartner 《2025 中国 ICT 技术成熟度曲线》,唯一入选的iPaaS供应商!

    Gartner发布《2025年中国ICT技术成熟度曲线》报告,谷云科技RestCloud作为唯一入选的独立iPaaS厂商上榜API管理领域。报告指出API管理平台能解决企业数字化转型中的数据孤岛问题,通过统一管理API全生命周期,实现跨系统数据实时同步与业务协同。RestCloud平台具备四大核心价值:1)消除数据孤岛,实现全域集成;2)提升开发效率与API复用率;3)保障安全稳定运行;4)结合AI驱动智能化业务创新。该入选标志着国产iPaaS技术已达国际前沿水平,正成为企业数字化转型的核心引擎。

  • 全球优质AI语音大模型盘点:Whisper、Gemini Speech

    本文分析了当前主流AI语音大模型的核心优势与应用场景。全球顶尖模型包括:OpenAI Whisper(多语言识别与翻译)、Google Gemini(情感化语音生成)、Meta AudioCraft(音乐创作与风格转换)。国内讯飞星火(方言识别)、阿里通义(电商客服)、百度文心(车载场景)表现突出。技术突破点在于云端协同架构、零样本克隆和情感语音合成。选择模型需考虑语言支持、场景适配、部署