Journal Journal: Comparing javascript compression methods. 2
From the bad-geico-commercial agency)
Wanna save 80% or more on your javascript file sizes?
When you have 30 or more javascript includes, and a dozen or more css includes, that's more than 40 separate hits to the server, each with its' own fileseek, etc. - and the browser has to stop whatever else it's doing to parse each one.
So I decided to exercise my perl-fu.
Step 1: Write a perl script to read the list of includes from the main index file, and concatenate them into one big js.$VERSION.js and js.$VERSION.css
Step 2: Strip out all the comments and empty lines, and remove all extra whitespace.
These two steps will give some speedup to your site loading,
There are plenty of "minifiers" out there that will combine step 2 with changing any local variables from thisLongVariableName, anotherOne, andAnotherOne to a, b, c. At the end of the process, you have a file that is probably, depending on your use of whitespace and comments, between 40 and 70% smaller. This will definitely load faster, and the use of smaller variable names inside functions also gives an extra little (mostly unmeasurable but still there) boost, as well as reducing the memory footprint of your page or application.
Step 3: Global function substitution is a bit more complicate. Functions aren't that hard to identify in source code - you can make a list just by splitting the source on the keyword "function" and keeping the next word (just remember to throw away the "zeroeth" one - it's not a function.
Then go through the source and replace every function name with a 2 or 3-letter identifier. I started at A1 (A0 is reserved for "main()", and the sequence is pretty obvious A0 to A9, AA to AZ, Aa to Az, B0 to B9, etc.
Step 4: Global variable substitution is a bit more complex, because variables can be listed one after another: var a, b, c=10, d=45, e="thank you for the fish". So, you have to do a bit more work, a bit more head-scratching, but you can substitute the variables that weren't substituted locally. Pick up where you left off with the functions, (for example, if the last function was Ca, continue wiht Cb).
What is the net savings from global substitution? In my test case, here's the comparison:
1. Merged source file: 184.4k
2. After removing whitespace and comments: 141.2k
3. After local variable substitution: 114.2k
4. After global variable and function name substitution: 70.5k
5. After gzip: 21.3k
Total saving: 89.5%
With string de-duplication, it could probably surpass 90%.
Current bugs - the code for finding the variables sucks, and it can only remove whitespace from css files - not variable substitution (need an "exclude" list for that), so css files don't shrink nearly as much.