YUI Compressor

YUI Compressor
According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc.

In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Each of these tools, however, has drawbacks. JSMIN, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs).

The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin (becoming 10% after HTTP compression). Starting with version 2.0, the YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter's regular-expression-based CSS minifier.

On This Page:
•How does the YUI Compressor work?
•Video: Yahoo engineer Julien Lecomte introduces the YUI Compressor
•Using the YUI Compressor
•Additional notes
•Support & Community
•Filing Bugs and Feature Requests
Quick Links:
•Documentation: Detailed description of the YUI Compressor and how to use it.
•Release Notes: Detailed change log for the YUI Compressor.
•CSS minification: Description of the CSS minification performed by the compressor.
•License: All code specific to YUI Compressor is issued under a BSD license. YUI Compressor extends and implements code from Mozilla's Rhino project. Rhino is issued under the Mozilla Public License (MPL), and MPL applies to the Rhino source and binaries that are distributed with YUI Compressor, including Rhino modifications made by YUI Compressor. YUI Compressor also makes use of and distributes a binary of JArgs; the JArgs BSD license applies to this binary.
•Download: Download the YUI Compressor.
.Video: Yahoo engineer Julien Lecomte introduces the YUI Compressor

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

YUI Compressor
According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage). This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy. With the right design in place, there are many secondary strategies for improving performance such as minification of the code, HTTP compression, using CSS sprites, etc.

In terms of code minification, the most widely used tools to minify JavaScript code are Douglas Crockford's JSMIN, the Dojo compressor and Dean Edwards' Packer. Each of these tools, however, has drawbacks. JSMIN, for example, does not yield optimal savings (due to its simple algorithm, it must leave many line feed characters in the code in order not to introduce any new bugs).

The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Tests on the YUI Library have shown savings of over 20% compared to JSMin (becoming 10% after HTTP compression). Starting with version 2.0, the YUI Compressor is also able to compress CSS files by using a port of Isaac Schlueter's regular-expression-based CSS minifier.

On This Page:
•How does the YUI Compressor work?
•Video: Yahoo engineer Julien Lecomte introduces the YUI Compressor
•Using the YUI Compressor
•Additional notes
•Support & Community
•Filing Bugs and Feature Requests
Quick Links:
•Documentation: Detailed description of the YUI Compressor and how to use it.
•Release Notes: Detailed change log for the YUI Compressor.
•CSS minification: Description of the CSS minification performed by the compressor.
•License: All code specific to YUI Compressor is issued under a BSD license. YUI Compressor extends and implements code from Mozilla's Rhino project. Rhino is issued under the Mozilla Public License (MPL), and MPL applies to the Rhino source and binaries that are distributed with YUI Compressor, including Rhino modifications made by YUI Compressor. YUI Compressor also makes use of and distributes a binary of JArgs; the JArgs BSD license applies to this binary.
•Download: Download the YUI Compressor.
.Video: Yahoo engineer Julien Lecomte introduces the YUI Compressor

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.

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 Specifies the type of the input file
--charset Read the input file using
--line-break Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o Place the output into . 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

Comments