1 Minification JavaScript & CSS

2 Minification Removing 0 Whitespace 0 Line Breaks 0 Comments 0 Shrink Variables 0 Optimize Code

3 Why Minify? 0 Reducing file size cuts the time needed to send all the bytes over the Internet. 0 The Google TM Closure Compiler, a new minimization tool, finds ways to compress your JavaScript code even further than existing minimization tools. 0 It achieves additional compression by using compiler-like technology to rewrite your JavaScript into a much smaller form, while ensuring the code still runs correctly.

4 So the options are 0 The Google TM Closure Compiler 0 Provides the smallest and fastest code 0 YUI Compressor 0 The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. 0 JSMIN, the Dojo compressor and Dean Edwards' Packer

5 Dean Edwards' Packer 0 Not only compresses but also obfuscates. 0 How does it do what it does? (eval===evil?) 0 Why Obfuscation? 0 Is it really worth it?

6 Debugging 0 Minified Code very tricky to debug. 0 Different files in Dev. Environment and QA/Prod. Environment. 0 Fiddler2 – JavaScript Formatter 0 YSlow! - Tools

7 Biggest Challenge - ; insertion 0 How browsers work with JavaScript Actual Code i=10; while(i){ i-- } Browser Corrected Code i=10; while(i){ i--; //inserted }

8 The Silent Error block {.... } Might work well in other languages block {.... } Works well in JavaScript

9 Your style matters return { ok: false }; SILENT ERROR! return { ok: true }; Works well in JavaScript

10 Your style matters return { ok: false };

11 Your style matters return; // semicolon insertion { ok: false };

12 Your style matters return; { // block ok: false };

13 Your style matters return; { ok: false // label };

14 Your style matters return; { // useless ok: false // expression };

15 Your style matters return; { ok: false; // semicolon };

16 Your style matters return; { ok: false; }; // empty statement

17 Your style matters return; { // unreachable statement ok: false; }

18 Your style matters return { ok: false }; 0 Bad style return; { ok: false; } 0 Bad results

19 Payroll Example ~62%

20 Compressor Tool 0 Get all Static Content minified in one go. 0 Just copy the files to its directory and execute MinifyMe.bat 0 Uses Google TM Closure Compiler for JS Minification, YUI Compressor for CSS Minification and Dean Edwards Packer for Obfuscation. 0 Can be changed by editing compressor.vbs 0 Plans include recursive directories and image optimization using ImageMagick.

21 Minified Solutions 0 WebTop 0 Payroll

22 Thank You