How does yui-compressor that compresses javascript and css files work?

Question

I am curious to understand what all things a compressor like yui-compressor do to compress a js or css file, what steps do i need to take if i want to write my own compressor.

Answer 1

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.

Source: http://developer.yahoo.com/yui/compressor/#work

Answer 2

From the official doc site

" 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."

Css compression code here https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/CssCompressor.java

Js compression code here https://github.com/yui/yuicompressor/blob/master/src/com/yahoo/platform/yui/compressor/JavaScriptCompressor.java

Answer 3

As I know theses are major steps :

• Remove every extra space (the parser doesn't need them)
• Remove carriage returns (the parser doesn't need them too)

For the JS

• Replace variables names for new ones shorter, unique of course

EDIT : The simpliest way to have a good idea is actually to create one CSS and JS and see difference after compression.