目的:
web项目前端js的体积大小影响页面性能和用户体验, 压缩js是web优化的一个重要手段。JavaScript的压缩不是为了保护代码而压缩,而是压缩后的js代码文件可以小一倍甚至多倍,从而使这个js代码快速的下载到客户端,特别js文件较大时速度效果非常明显.
方法:
JS优化的方法有以下几个方法:
1、tomcat的压缩, gzip压缩启用的情况下, 压缩的比例大概是1:6
2、js加载的时候合并下载, 可以有效减少请求js产生的网络连接次数。(满足Yahoo!前端优化第一条原则:Minimize HTTP Requests,来减少三路握手和HTTP请求的发送次数。)
3、编写js的时候减少js体积, 通用的方法是js的压缩, 压缩的比例大概是1:2。(主要是去除JS文件里的注释、空白,并且压缩局部变量长度等等)
JS压缩工具和途径:
1、在线压缩:
提供在线压缩的网站有很多,这里推荐http://tools.css-js.com/compressor.html
推荐理由是这个站点里面有四个压缩引擎,一个YUI压缩,一个UglifyJS压缩,一个JSPacker压缩,和一个新的JsMin压缩。可以根据自己需要选择。
一般用UglifyJS引擎压缩就可以。jQuery和好些其他的前端项目就是用他压缩的。
2、压缩工具:
几款比较主流的压缩内核:
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这样的单字符,很能节省体积。