Web优化之Javascript Compressor

目的：

web项目前端js的体积大小影响页面性能和用户体验， 压缩js是web优化的一个重要手段。JavaScript的压缩不是为了保护代码而压缩，而是压缩后的js代码文件能够小一倍甚至多倍，从而使这个js代码快速的下载到客户端，特别js文件较大时速度效果很是明显．

 

方法：

JS优化的方法有如下几个方法：

一、tomcat的压缩， gzip压缩启用的状况下， 压缩的比例大概是1：6

二、js加载的时候合并下载， 能够有效减小请求js产生的网络链接次数。（知足Yahoo!前端优化第一条原则：Minimize HTTP Requests，来减小三路握手和HTTP请求的发送次数。）

三、编写js的时候减小js体积， 通用的方法是js的压缩， 压缩的比例大概是1：2。（主要是去除JS文件里的注释、空白，而且压缩局部变量长度等等）

 

JS压缩工具和途径：

一、在线压缩：

提供在线压缩的网站有不少，这里推荐http://tools.css-js.com/compressor.html

推荐理由是这个站点里面有四个压缩引擎，一个YUI压缩，一个UglifyJS压缩，一个JSPacker压缩，和一个新的JsMin压缩。能够根据本身须要选择。
通常用UglifyJS引擎压缩就能够。jQuery和好些其余的前端项目就是用他压缩的。

 

二、压缩工具：

几款比较主流的压缩内核：

UglifyJS 是用 NodeJS 编写的 JavaScript 压缩工具，是目前最流行的JS压缩工具， JQuery 就是使用此工具压缩， UglifyJS 压缩率高，压缩选项多，而且具备优化代码，格式化代码功能，目前国内能提供UglifyJS压缩的都还处在1.0版本，本站率先升级到 2.0 时代。

YUI compressor 是Java编写的压缩工具，由雅虎发布，压缩是 100％ 的安全，比大多数其余工具备更高的压缩比， 通常代码的压缩率达到 40％ 至 60％，YUI compressor 也可以压缩CSS文件，国内互联网公司，阿里、淘宝、百度等都是采用 YUI compressor 内核压缩后发布代码。

JSPacker 由PHP编写的压缩工具，能够混淆代码保护知识产权，产生的代码兼容IE、FireFox等经常使用浏览器，国内大部分在线工具网站都采用这种算法压缩，只由于此算法采用PHP编写，正则表达式替换语句，没有语法分析内核，环境搭建成本低，压缩率上远不如以上两种内核，而且混淆代码页不符合开源精神。

JsMin 是用C语言编写的一个轻量级JS压缩器，去除JavaScript文件中的注释和没必要要的空格。它一般减小了一半的文件大小，从而致使更快的下载速度。

Google Closure Compiler 是一个JavaScript优化器，将Web应用编译成压缩的、高性能的JavaScript代码。编译器去除无效代码，并将剩余代码重写并压缩，使Web应用可以快速在浏览器的JavaScript引擎上执行。这个工具在Google的Gmail，Google文档和Google地图中都有使用。Google但愿这个工具的开源可以对Web开发社区有所帮助。

Javascript Obfuscator 是js压缩和混淆工具，能够经过这里下载试用版：http://www.javascript-source.com/

 

这里推荐YUI Compressor，YUI Compressor能够很好的集成到ant中，ant编译的脚本以下：

<property name="yuicompressor.path" location="yuicompressor-2.4.8.jar"/> 


<target name="compres-js-css" description="Compress js and css file">  
	    <echo>${ant.project.name} Compress js and css file</echo>
        <apply executable="java" dest="${webapps.dir}">
            <fileset dir="${src.web.dir}">
		<include Name="**/*.js"/>								
            </fileset>
            <arg line="-jar"/>
            <arg path="${yuicompressor.path}"/>
            <arg value="-o"/>
            <targetfile/>
            <mapper type="glob" from="*.js" to="*-min.js"/>
        </apply>
</target> 

 

JS编码建议：

把JS文件用匿名函数的方式封装起来，对外只给一个接口。这样JS压缩引擎就能够把你匿名函数中不对外开放的内部变量名称都给替换成a,b,c,d这样的单字符，很能节省体积。