SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Extreme JavaScript Compression With YUI Compressor
About YUI Compressor • Remove
comments • Remove extra white space • Identifier replacement • Micro-optimizations • Built on top of Rhino interpreter – Makes all optimizations safe
Mozilla Rhino • Open source
JavaScript interpreter • Written in Java • Based on Firefox's interpreter http://www.mozilla.org/rhino/
Primitive Values • Strings take
up the most space • Non-numeric literals take second-most – true, false – null – undefined • Approach: Any literal value used two or more times should be stored in a local variable
What Can't Be Replaced •
Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc.
Global Variables • Most bytes:
– document – window • Approach: Any global variable used two or more times should be stored into a local variable
What Can't Be Replaced •
Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc. • Property names – foo.bar
Property Names • Next to
repeated strings, biggest source of extra bytes • Anything to the right of a dot cannot be replaced • Makes a.b.c even more expensive • Approach: Any property used two or more times should be stored into a local variable
Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement
Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1
Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1 • JScript conditional comments
Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1 • JScript conditional comments – Only solution: Don't use
Verbose Mode • Use -v
switch to enable • Reports issues with code related to minification: – Undeclared variables – Unused variables – Functions with more than one var statement – Use of evil features (eval(), with, conditional comments)
For Optimal File Size •
Use local variables to store: – Repeated primitive values – Global variables – Object properties • Limit each function to one var and one return • Avoid using eval() and with() • Heed YUI Compressor's advice • Combine with HTTP compression for best savings