代码改变世界

JavaScript 代码压缩工具

2012-02-27 19:24 by 囧月, ... 阅读, ... 评论, 收藏, 编辑

为了使页面更快的完成加载,经常需要对javascript/css代码进行压缩以减小体积,这里简单列一下用过的压缩工具,同时也作为存档。

UglifyJS

UglifyJS是构建于nodeJS服务器端之上的一个代码压缩工具,目前jQuery使用它来压缩,压缩效果比较好。

GitHub主页:http://github.com/mishoo/UglifyJS/

在线使用:http://marijnhaverbeke.nl/uglifyjs

使用方法:

  1. http://nodejs.org下载nodejs,用到的是node.exe
  2. 再从UglifyJS的GitHub主页下载它的最新版本
  3. 复制node.exe到UglifyJS的bin目录
  4. 修改bin\uglifyjs,把require("uglify-js")改成require("../uglify-js"),假如提示找不到uglify-js的话
  5. 运行node uglifyjs –o fancyValidate.min.js fancyValidate.js

注意要先指定-o参数,且-o参数后面紧跟的是压缩后的文件名,最后才是源文件。

如果嫌下载麻烦的话,直接使用它的在线版本。

 

Microsoft Ajax Minifier

Microsoft Ajax Minifier是微软出品的代码压缩工具,支持JavaScript和css代码压缩。

官方主页:http://ajaxmin.codeplex.com/

下载并安装,使用方法也很简单:ajaxmin fancyValidate.js –o fancyValidate.min.js

更多的参数使用方法请看官方的说明文档:http://ajaxmin.codeplex.com/wikipage?title=Command-Line%20Switches

 

Google Closure Compiler

谷歌出品的代码压缩工具,需要JRE(从http://www.java.com/zh_CN/download/下载)的支持

官方主页:http://code.google.com/p/closure-compiler/

先安装好JRE,简单使用:java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

更多的参数说明请看相关的文档:https://developers.google.com/closure/compiler/docs/overview

 

YUI Compressor

Yahoo!UI团队出品的代码压缩工具,支持JavaScript和css代码压缩,同样也需要JRE支持。

官方主页:http://developer.yahoo.com/yui/compressor/

GitHub主页:https://github.com/yui/yuicompressor

http://yuilibrary.com/download/yuicompressor/下载它,简单使用:java -jar yuicompressor-2.4.7.jar myfile.js -o myfile-min.js

更多参数的说明请看官方主页或https://github.com/yui/yuicompressor/blob/master/doc/README

 

Packer

著名的js大牛Dean Edwards写的压缩工具,压缩比率也比较高。

官方主页:http://dean.edwards.name/packer/

时间比较久远,但依然好用,也提供了不少参数设置。

 

JSMIN

与Packer差不多时代,仅对注释、空白等进行压缩。

官方主页:http://www.crockford.com/javascript/jsmin

提供了一个DOS命令行版本:http://www.crockford.com/javascript/jsmin.zip

简单使用:jsmin <fancyValidate.js> fancyValidate.min.js

 

结尾

就简单介绍到这里,另外在进行压缩之前最好能够使用JSLint(http://www.jslint.com/)检查代码,否则很可能导致压缩失败。