??? 一、简介: ??? 目前开发Web应用Javascript发挥的作用越来越大,相关的Javascript框架也比较多。但是有一个问题,我们开发过程中,所有的JS代码都添加了注释,如使用JsDoc,代码的可读性比较强,同时这样的代码也便于调试。但是在产品环境中,我们希望这些JS代码是压缩和混淆过的,这主要是让 JS代码加载的更快,这也是Google AJAX Libraries API出现的原因。YUI Compressor 是一款由 Yahoo 公司开发的、功能非常强大的 JS、CSS 代码混淆和压缩工具,采用Java开发,目前很多Javascript Framework都使用YUI Compressor进行代码分发。 ??? YUI Compressor 官网网址: ??? YUI Compressor 下载页面: ??? 二、使用简介: ??? 在命令行下执行 Java 程序,运行 yuicompressor jar 软件包,来完成任务: ??? //压缩JS ??? //压缩CSS ??? 三、参考官方英文注释: ??? 3.1 How does the YUI Compressor work? ??? The YUI Compressor is written in Java (requires Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file. It starts by analyzing the source JavaScript file to understand how it is structured. It then prints out the token stream, omitting as many white space characters as possible, and replacing all local symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is appropriate (in the face of evil features such as eval or with, the YUI Compressor takes a defensive approach by not obfuscating any of the scopes containing the evil statement) The CSS compression algorithm uses a set of finely tuned regular expressions to compress the source CSS file. The YUI Compressor is open-source, so don't hesitate to look at the code to understand exactly how it works. ??? 3.2 Using the YUI Compressor from the command line ??? java -jar yuicompressor-x.y.z.jar ??? Usage: java -jar yuicompressor-x.y.z.jar [options] [input file] ??? Global Options ??? JavaScript Options ??? GLOBAL OPTIONS ??? -h, --help ??? --line-break ??? --type js|css ??? --charset character-set ??? -o outfile ??? -v, --verbose ??? JAVASCRIPT ONLY OPTIONS ??? --nomunge ??? --preserve-semi ??? --disable-optimizations ??? The following command line (x.y.z represents the version number): ??? java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.jswill minify the file myfile.js and output the file myfile-min.js. For more information on how to use the YUI Compressor, please refer to the documentation included in the archive. ??? The charset parameter isn't always required, but the compressor may throw an error if the file's encoding is incompatible with the system's default encoding. In particular, if your file is encoded in utf-8, you should supply the parameter. ??? java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8 ??? 四、YUI Compressor 压缩 JavaScript 的原理 ??? YUI Compressor 压缩 JavaScript 的内容包括: ??? 1.移除注释 ??? YUI Compressor 包括哪些细微优化呢? ??? ? object["property"],如果属性名是合法的 JavaScript 标识符(注:合法的 JavaScript 标识符――由一个字母开头,其后选择性地加上一个或者多个字母、数字或下划线)且不是保留字,将优化为: object.property ??? 比如: ??? (function(){function add(num1, num2) {return num1 + num2;}})(); ??? 进行属标识符替换后: ??? (function(){function A(C, B) {return C+ B;}})(); ??? 再移除额外的空格,最终成了: ??? (function(){function A(C,B){return C+B;}})(); ??? YUI Compressor 标识符替换仅替换函数名和变量名,那哪些不能被替代呢? ??? 1.原始值:字符串、布尔值、数字、null 和 undefined。一般来说字符串占的空间最多,而非数字字面量其次(true、false,null,underfinded)。 ??? 但有部分情况下是禁止使用标识符替换的: ??? 1.使用 eval() 函数。解决方法:不使用或者创建一个全局函数封装 eval()。 ??? 五、参考资料: ??? 作者:张庆(网眼) 西安 PHP 教育培训中心 2010-8-18
????
http://developer.yahoo.com/yui/compressor/
????
http://yuilibrary.com/downloads/#yuicompressor
??? java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
??? java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css
????? -h, --help??????????????? Displays this information
????? --type <js|css>?????????? Specifies the type of the input file
????? --charset <charset>?????? Read the input file using <charset>
????? --line-break <column>???? Insert a line break after the specified column number
????? -v, --verbose???????????? Display informational messages and warnings
????? -o <file>???????????????? Place the output into <file>. Defaults to stdout.
????? --nomunge???????????????? Minify only, do not obfuscate
????? --preserve-semi?????????? Preserve all semicolons
????? --disable-optimizations?? Disable all micro optimizations
??????? Prints help on how to use the YUI Compressor
??????? Some source control tools don't like files containing lines longer than,
??????? say 8000 characters. The linebreak option is used in that case to split
??????? long lines after a specific column. It can also be used to make the code
??????? more readable, easier to debug (especially with the MS Script Debugger)
??????? Specify 0 to get a line break after each semi-colon in JavaScript, and
??????? after each rule in CSS.
??????? The type of compressor (JavaScript or CSS) is chosen based on the
??????? extension of the input file name (.js or .css) This option is required
??????? if no input file has been specified. Otherwise, this option is only
??????? required if the input file extension is neither 'js' nor 'css'.
??????? If a supported character set is specified, the YUI Compressor will use it
??????? to read the input file. Otherwise, it will assume that the platform's
??????? default character set is being used. The output file is encoded using
??????? the same character set.? IMPORTANT: if you do not supply this argument
??????? and the file encoding is not compatible with the system's default
??????? encoding, the compressor will throw an error.? In particular, if your
??????? file is encoded in utf-8, you should include this parameter.
??????? Place output in file outfile. If not specified, the YUI Compressor will
??????? default to the standard output, which you can redirect to a file.
??????? Display informational messages and warnings.
????? Minify only. Do not obfuscate local symbols.
????? Preserve unnecessary semicolons (such as right before a '}') This option
????? is useful when compressed code has to be run through JSLint (which is the
????? case of YUI for example)
????? Disable all the built-in micro optimizations.Note: If no input file is specified, it defaults to stdin.
??? 2.移除额外的空格
??? 3.细微优化
??? 4.标识符替换(Identifier Replacement)
??? ? {"property":123},如果属性名是合法的 JavaScript 标识符且不是保留字,将优化为 {property:123} (注:在对象字面量中,如果属性名是一个合法的 JavaScript 标识符且不是保留字,并不强制要求用引号引住属性名)。
??? ? 'abcd\'efgh',将优化为 "abcd'efgh"。
??? ? "abcd" + "efgh",如果是字符串相连接,将优化成 "abcdefgh"(注:所有在使用 YUI Compressor 的前提下,对于脚本中的字符串连接,使用连接符 “+” 的效率和可维护性最高)。
??? 对于 JavaScript 最有效的压缩优化,当属标识符替换。
??? 2.全局变量:window、document、XMLHttpRequest等等。使用最多的就是 document、window。
??? 3.属性名,比如:foo.bar。占据的空间仅次于字符串,”.” 操作符无法被代替,且 a.b.c 更加费空间。
??? 4.关键字。经常被过度使用的关键字有:var、return。最好的优化方法:一个函数仅出现一次 var 和 return 关键字。
??? 对于原始值、全局变量、属性名的优化处理方式大致相同:任何字面量值、全局变量或者属性名被使用超过 2 次(包括2次),都应该用局部变量存储代替。
??? 2.使用 with 语句。解决方法:方法同上。
??? 3.JScript 的条件注释。唯一解决的方法:不使用。
??? 由于 YUI Compressor 是建立在 rhino interpreter 基础上的,所以上述所有的优化都是安全的。
??? 《Extreme JavaScript Compression With YUI Compressor》:
????
http://www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressor
??? 来自“网眼视界”:http://blog.why100000.com
?
?