用 YUI Compressor 压缩和混淆 JS 和 CSS

一、简介：

目前开发Web应用Javascript发挥的作用越来越大，相关的Javascript框架也比较多。但是有一个问题，我们开发过程中，所有的JS代码都添加了注释，如使用JsDoc，代码的可读性比较强，同时这样的代码也便于调试。但是在产品环境中，我们希望这些JS代码是压缩和混淆过的，这主要是让 JS代码加载的更快，这也是Google AJAX Libraries API出现的原因。YUI Compressor 是一款由 Yahoo 公司开发的、功能非常强大的 JS、CSS 代码混淆和压缩工具，采用Java开发，目前很多Javascript Framework都使用YUI Compressor进行代码分发。

YUI Compressor 官网网址：
http://developer.yahoo.com/yui/compressor/

YUI Compressor 下载页面：
http://yuilibrary.com/downloads/#yuicompressor

二、使用简介：

在命令行下执行 Java 程序，运行 yuicompressor jar 软件包，来完成任务：

//压缩JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js

//压缩CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.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
-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.

JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations

GLOBAL OPTIONS

-h, --help
Prints help on how to use the YUI Compressor

--line-break
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.

--type js|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'.

--charset character-set
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.

-o outfile
Place output in file outfile. If not specified, the YUI Compressor will
default to the standard output, which you can redirect to a file.

-v, --verbose
Display informational messages and warnings.

JAVASCRIPT ONLY OPTIONS

--nomunge
Minify only. Do not obfuscate local symbols.

--preserve-semi
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-optimizations
Disable all the built-in micro optimizations.Note: If no input file is specified, it defaults to stdin.

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.移除注释
2.移除额外的空格
3.细微优化
4.标识符替换（Identifier Replacement）

YUI Compressor 包括哪些细微优化呢？

• object["property"]，如果属性名是合法的 JavaScript 标识符（注：合法的 JavaScript 标识符——由一个字母开头，其后选择性地加上一个或者多个字母、数字或下划线）且不是保留字，将优化为： object.property
• {"property":123}，如果属性名是合法的 JavaScript 标识符且不是保留字，将优化为 {property:123} （注：在对象字面量中，如果属性名是一个合法的 JavaScript 标识符且不是保留字，并不强制要求用引号引住属性名）。
• 'abcd\'efgh'，将优化为 "abcd'efgh"。
• "abcd" + "efgh"，如果是字符串相连接，将优化成 "abcdefgh"（注：所有在使用 YUI Compressor 的前提下，对于脚本中的字符串连接，使用连接符 “+” 的效率和可维护性最高）。
对于 JavaScript 最有效的压缩优化，当属标识符替换。

比如：

(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）。
2.全局变量：window、document、XMLHttpRequest等等。使用最多的就是 document、window。
3.属性名，比如：foo.bar。占据的空间仅次于字符串，”.” 操作符无法被代替，且 a.b.c 更加费空间。
4.关键字。经常被过度使用的关键字有：var、return。最好的优化方法：一个函数仅出现一次 var 和 return 关键字。
对于原始值、全局变量、属性名的优化处理方式大致相同：任何字面量值、全局变量或者属性名被使用超过 2 次（包括2次），都应该用局部变量存储代替。

但有部分情况下是禁止使用标识符替换的：

1.使用 eval() 函数。解决方法：不使用或者创建一个全局函数封装 eval()。
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

作者：张庆(网眼) 西安 PHP 教育培训中心 2010-8-18
来自“网眼视界”：http://blog.why100000.com
作者微博：http://t.qq.com/zhangking
“十万个为什么”电脑学习网：http://www.why100000.com