现在的Web项目总是离不开大量JavaScript,而JS文件的体积也越来越大,也越来越影响页面的感知性能(Perceived Performance)。因此,我们会对JS文件进行压缩,一方面是使用Gzip,而另一方面则是去除JS文件里的注释、空白,并且压缩局部变量长度等等。对于一些成熟的类库来说,它们本身都会提供“完整注释”以及“强烈压缩”两个版本。但是,有时候我们需要自己修复类库里的bug,这只能在注释版中修改,对于压缩版自然就无能为力了。此外,自定义的脚本文件一般也值得一压。因此我在项目中时常会备一个脚本压缩工具。
压缩脚本的工具有很多,例如老牌的JSMin,或是YUI Compressor(下称YC),它们都可以用来压缩脚本文件(后者还可以处理CSS)。不过在新项目中,我使用了新的工具:Google Closure Compiler(下称GC)。GC有多种用法,例如网页版,网络API版,还有独立应用程序版。GC与YC不同的是,YC是一个压缩器(Compressor),而GC更是一个编译器(Compiler),也就是说GC的压缩并不仅仅是去除注释和空白,还可以在保证代码正确性的情况下进一步地改写成更省空间的做法,一个字节算一个字节,例如:
view source
print?
1 a = new Object => a = {}
2 a = new Array => a = []
3 if (a) b() => a && b()
4 return 2 * 3; => return 6;
Google Closure Compiler 提供三种压缩方法,分别是空格移除、简单压缩及进阶压缩。简单压缩基本上只是把comments 和空格拿走(跟YUI Compressor 基本一样);进阶压缩除以上功能外,还能够rename variable name、甚至重写某些statement!很好很强大!
Yahoo!给我们带来了YUI compressor!,呵呵,废话少说,赶紧体验。
YUI compressor的下载地址是:http://developer.yahoo.com/yui/compressor/
淘宝做了一个可视化的版本,叫做TBCompressor
如果你没有安装JAVA环境的话,还需要安装一下JDK
下载地址是:http://java.sun.com/javase/downloads/index.jsp 我们选择(Java SE Development Kit (JDK) 6 Update 11)这个下载。
http://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/VerifyItem-Start/jdk-6u11-windows-i586-p.exe?BundledLineItemUUID=JglIBe.m5MYAAAEeCQRX2Oy2&OrderID=z6JIBe.mlj0AAAEe_wNX2Oy2&ProductID=DY5IBe.ogAkAAAEdcjBGb7Et&FileName=/jdk-6u11-windows-i586-p.exe
下载,安装,一路Next,没有任何问题,对了,你可以修改一下路径。
安装完毕以后,需要配置一下JAVA_HOME环境变量。
配置方法如下。
1、点击我的电脑—>属相—>高级—>环境变量—>系统变量
2、新建变量,变量名JAVA_HOME 路径:E:Program FilesJavajdk1.6.0_11 (我的是在E盘,你的JDK安装到那个盘,就写那个盘)
3、找到path变量,在后面添加路径:;%JAVA_HOME%jre6bin
OK,一路确定,关闭窗口。
打开CMD,输入java -version
看看能不能出来版本?
java version “1.6.0_11″
Java(TM) SE Runtime Environment (build 1.6.0_11-b03)
Java HotSpot(TM) Client VM (build 11.0-b16, mixed mode, sharing)
OK,我的没有问题了,呵呵,现在,我们测试一下,看看他的压缩效果。
我们就压缩一个Dreamweaver自带的“AC_RunActiveContent.js”脚本文件。
下图中,左侧的是原始文件,右侧的是压缩后的文件。
YUI压缩对比图
呵呵,接近50%的压缩比,不错了!另外,就目前测试的情况来看,非常完美,不会出现在线压缩工具经常出现的“语法错误”了。 :mrgreen:
压缩脚本的工具有很多,例如老牌的JSMin,或是YUI Compressor(下称YC),它们都可以用来压缩脚本文件(后者还可以处理CSS)。不过在新项目中,我使用了新的工具:Google Closure Compiler(下称GC)。GC有多种用法,例如网页版,网络API版,还有独立应用程序版。GC与YC不同的是,YC是一个压缩器(Compressor),而GC更是一个编译器(Compiler),也就是说GC的压缩并不仅仅是去除注释和空白,还可以在保证代码正确性的情况下进一步地改写成更省空间的做法,一个字节算一个字节,例如:
view source
print?
1 a = new Object => a = {}
2 a = new Array => a = []
3 if (a) b() => a && b()
4 return 2 * 3; => return 6;
Google Closure Compiler 提供三种压缩方法,分别是空格移除、简单压缩及进阶压缩。简单压缩基本上只是把comments 和空格拿走(跟YUI Compressor 基本一样);进阶压缩除以上功能外,还能够rename variable name、甚至重写某些statement!很好很强大!
Yahoo!给我们带来了YUI compressor!,呵呵,废话少说,赶紧体验。
YUI compressor的下载地址是:http://developer.yahoo.com/yui/compressor/
淘宝做了一个可视化的版本,叫做TBCompressor
如果你没有安装JAVA环境的话,还需要安装一下JDK
下载地址是:http://java.sun.com/javase/downloads/index.jsp 我们选择(Java SE Development Kit (JDK) 6 Update 11)这个下载。
http://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/VerifyItem-Start/jdk-6u11-windows-i586-p.exe?BundledLineItemUUID=JglIBe.m5MYAAAEeCQRX2Oy2&OrderID=z6JIBe.mlj0AAAEe_wNX2Oy2&ProductID=DY5IBe.ogAkAAAEdcjBGb7Et&FileName=/jdk-6u11-windows-i586-p.exe
下载,安装,一路Next,没有任何问题,对了,你可以修改一下路径。
安装完毕以后,需要配置一下JAVA_HOME环境变量。
配置方法如下。
1、点击我的电脑—>属相—>高级—>环境变量—>系统变量
2、新建变量,变量名JAVA_HOME 路径:E:Program FilesJavajdk1.6.0_11 (我的是在E盘,你的JDK安装到那个盘,就写那个盘)
3、找到path变量,在后面添加路径:;%JAVA_HOME%jre6bin
OK,一路确定,关闭窗口。
打开CMD,输入java -version
看看能不能出来版本?
java version “1.6.0_11″
Java(TM) SE Runtime Environment (build 1.6.0_11-b03)
Java HotSpot(TM) Client VM (build 11.0-b16, mixed mode, sharing)
OK,我的没有问题了,呵呵,现在,我们测试一下,看看他的压缩效果。
我们就压缩一个Dreamweaver自带的“AC_RunActiveContent.js”脚本文件。
下图中,左侧的是原始文件,右侧的是压缩后的文件。
YUI压缩对比图
呵呵,接近50%的压缩比,不错了!另外,就目前测试的情况来看,非常完美,不会出现在线压缩工具经常出现的“语法错误”了。 :mrgreen: