Investigate JS Minification

[GoogleCodeExporter]

Our current build process uses yuicompressor, but we should investigate
other possibilities.  Specifically, I would like to look at Google's
Closure: http://code.google.com/closure/compiler/ and see how better/worse
it performs.

Original issue reported on code.google.com by codedr...@gmail.com on 5 Nov 2009 at 8:09

[GoogleCodeExporter]

The problem with Closure (on Advanced settings) is that it can remove code 
which can 
be problematic. Unlike YUI, Closure can minify globals as well as local 
variables.

Based on the simple optimization (basically equivalent to YUI's), Closure got 
19.79KB 
on the svg-editor.js stable versus the 20.7KB for YUI. In compiling, I noticed 
its 
complaining a lot about trailing commas. For svgcanvas.js Closure Simple got 
42.68KB 
vs YUI's 46.8KB. 

With the way Closure Advanced removes uncalled code. Compressing svgcanvas.js 
under 
Advanced compression removed an astonishing 99.91% of the code. Leaving a mere 
94 
bytes of code: if(!window.console)window.console=new 
function(){this.log=function(){};this.dir=function(){}};

More seriously, exporting the SvgCanvas function and using Advanced compression 
led 
to 36.87KB versus YUI's 46.8KB.

This test does not test whether the output is functional.

Original comment by Antimatter15 on 9 Nov 2009 at 1:17

[GoogleCodeExporter]

Original comment by codedr...@gmail.com on 12 Jan 2010 at 10:33

• Added labels: Type-Task
• Removed labels: Type-Enhancement

[GoogleCodeExporter]

Also, need to see if we can:

  * gzip all JS files
  * they get served properly from googlecode to the browsers
  * all supported browsers handle js.gz files (including Safari, see
http://joseph.randomnetworks.com/archives/2006/07/13/compressed-javascript/ )

Original comment by codedr...@gmail.com on 19 Jan 2010 at 10:18

• Changed title: Investigate JS Minification and Compression

[GoogleCodeExporter]

Unless I'm mistaken, gzipping is something that can be only be set server-side. 
The
comments in that URL mention that you need to have access to a .htaccess file 
or use
PHP or some other method, which doesn't seem to be an option for googlecode.

I actually looked into this for the icons file too, hoping to find a way to set 
it in
SVN, but with no luck. If we're really interested in client-side only 
compression
though, this looks interesting:
http://stackoverflow.com/questions/294297/javascript-implementation-of-gzip/2944
21#294421

Original comment by adeve...@gmail.com on 20 Jan 2010 at 12:00

[GoogleCodeExporter]

In an example of great irony, here is one of google's articles on Google code 
talking
about how you should compress your files:
http://code.google.com/speed/articles/use-compression.html

While not seeming to provide a way to serve your google code files that way. :)

Original comment by adeve...@gmail.com on 20 Jan 2010 at 12:21

[GoogleCodeExporter]

I was thinking maybe I can just gzip the file and check it into the repo and the
browsers would automatically be able to handle it (i.e. if they fetch a JS and 
its
binary instead of text, try to gunzip.  Ah well thanks for the update/legwork on
this, now I don't have to do the investigation.  

Time for a bug against Google Code?

Original comment by codedr...@gmail.com on 20 Jan 2010 at 1:35

[GoogleCodeExporter]

Hey - not that I didn't trust your legwork, but I just did an experiment:

  * cat solitaire.js | gzip > solitaire.js.gz
  * modified solitaire.php to point at solitaire.js.gz
  * result: http://www.codedread.com/solitaire.php

I have no special handling of js.gz files in my .htaccess or anything.

This seems to imply that some browsers automatically interpret js.gz properly 
and
gunzip it first.  It works in Firefox, Opera, Chrome but *not* Safari :(

Original comment by codedr...@gmail.com on 20 Jan 2010 at 3:48

[GoogleCodeExporter]

Actually your Apache does appear to be set up to serve .js.gz (or just .gz) 
files
with "Content-Encoding: gzip". I uploaded the same file to deveria.com here:
http://a.deveria.com/tests/solitaire.js.gz which as you see opens a dialog box 
to
save the file in any browser.

Here's a site you can use to tell the difference: http://web-sniffer.net
If I enter your URL I see the HTTP Response Header include 
"Content-Encoding:  gzip"
while mine is set to "Content-Encoding: application/x-gzip". It could well be 
that
your server's settings are more common than mine, but it's still a requirement 
for it
to work. 

Having said that, let's try putting a .js.gz file on googlecode and see what 
happens. :)

Original comment by adeve...@gmail.com on 20 Jan 2010 at 4:30

[GoogleCodeExporter]

Correction: on my server it's the "Content-Type" that gives 
"application/x-gzip", not
the "Content-Encoding" (which is the actual flag missing to serve the file in 
its
unzipped form)

Original comment by adeve...@gmail.com on 20 Jan 2010 at 4:41

[GoogleCodeExporter]

Did a test with a .js.gz file on the svg-icon-loader project page:
http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.min.js.gz

Sadly no "Content-Encoding" header, so no worky. :(

Original comment by adeve...@gmail.com on 27 Jan 2010 at 2:29

[GoogleCodeExporter]

Original comment by codedr...@gmail.com on 27 Jan 2010 at 2:36

• Changed title: Investigate JS Minification

[GoogleCodeExporter]

I submitted an experimental support for Closure in r1480. It creates files with 
min-
closure.js suffix, but I haven't tested all features with Closure-minified 
source, so 
I'm leaving this open.

Original comment by rusn...@gmail.com on 28 Mar 2010 at 3:15

[GoogleCodeExporter]

Every new JS module I've been adding I have updated the Makefile to use the 
Closure compiler.  We should close this once we've verified that everything 
works as expected in the build process.

Original comment by codedr...@gmail.com on 12 Jan 2011 at 7:08