Use Yui compressor to compress and confuse JS and CSS

I. Introduction:

Currently, the development of Web application JavaScript plays an increasingly important role, and there are also many related JavaScript frameworks. But there is a problem. during the development process, all the JSCodeAnnotations have been added. For example, if jsdoc is used, the code is highly readable and easy to debug. However, in the product environment, we hope that the JavaScript code is compressed and obfuscated, which is mainly to make JS Code Load faster, which is also the reason why Google Ajax libraries API appears. Yui compressor is a powerful JavaScript code obfuscation and compression tool developed by Yahoo. It is developed using Java. Currently, many JavaScript frameworks use Yui compressor for code distribution.

Official website of Yui Compressor:
Http://developer.yahoo.com/yui/compressor/

Yui compressor download page:
Http://yuilibrary.com/downloads/#yuicompressor

Shunting: pasting

II. Introduction:

Execute JavaProgramRun the yuicompressor jar package to complete the task:

// Compress JS
Java-jar yuicompressor-2.4.2.jar -- Type JS -- charset UTF-8-V src. js> packed. js

// Compress CSS
Java-jar yuicompressor-2.4.2.jar -- type CSS -- charset UTF-8-V src.css> packed.css

3. Refer to the official English comments:

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 your white space characters as possible, and replacing all local symbols by a 1 (or 2, or 3) letter symbol your such a substitution is appropriate (in the face of edevil features such as eval or with, the Yui compressor takes a defensive approach by not obfuscating any of the scopes containing the edevil 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 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 . ults 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 particle, if your
file is encoded in UTF-8, you shoshould 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
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 ):

The 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 stored 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 particle, if your file is encoded in UTF-8, you shoshould supply the parameter.

Java-jar yuicompressor-x.y.z.jar myfile. js-O myfile-min.js -- charset UTF-8

Iv. Principle of Yui compressor compressing Javascript

Yui Compressor:

1. Remove comments
2. Remove extra spaces
3. Minor Optimization
4. identifier replacement)

What are the minor optimizations of Yui compressor?

• Object ["property"], if the property name is a legal JavaScript identifier (Note: A Legal JavaScript identifier -- starts with a letter, after that, you can selectively add one or more letters, numbers, or underscores (_). It is not a reserved word and will be optimized to: object. property
• {"Property": 123}. If the property name is a valid JavaScript identifier and is not a reserved word, It is optimized to {property: 123} (Note: In the object literal volume, if the property name is a valid JavaScript identifier and is not a reserved word, it is not mandatory to enclose the property name in quotation marks ).
• 'Abcd/'efgh' will be optimized to "abcd' efgh ".
• "ABCD" + "efgh" is optimized to "abcdefgh" If strings are connected. (Note: All strings in the script are connected when Yui compressor is used, the connector "+" has the highest efficiency and maintainability ).
For the most effective compression Optimization of JavaScript, the identifier is replaced.

For example:

(Function () {function add (num1, num2) {return num1 + num2 ;}})();

After the identifier is replaced:

(Function () {function a (C, B) {return C + B ;}})();

Then, remove the extra space and the result is:

(Function () {function a (C, B) {return C + B ;}})();

Replace the Yui compressor identifier with only the function name and variable name. Which of the following cannot be replaced?

1. Original values: String, Boolean value, number, null, and undefined. Generally, strings occupy the most space, rather than numeric literal values (true, false, null, underfinded ).
2. Global variables: window, document, XMLHttpRequest, etc. Document and window are the most commonly used.
3. attribute name, for example, foo. Bar. The occupied space is second only to the string, and the "." operator cannot be replaced, and A. B. C is more free.
4. keywords. Frequently Used keywords include VaR and return. Best optimization method: A function only displays the VaR and return keywords once.
The Optimization Methods for raw values, global variables, and attribute names are roughly the same: any literal value, global variable, or attribute name is used more than twice (including twice ), both should be replaced by local variable storage.

However, in some cases, replacement of identifiers is prohibited:

1. Use the eval () function. Solution: Do not use or create a global function to encapsulate eval ().
2. Use the with statement. Solution: Same as above.
3. Condition comments of JScript. The only solution: Do not use.
Because Yui compressor is built on Rhino interpreter, all the above optimizations are secure.

V. References:
Extreme JavaScript compression with Yui Compressor:
Http://www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressor