1

I am doing issues about script compression. Following is what I just found in stackoverflow:

"If you are using it in a webpage, gzip is a configuration method in your web server. The file is gzipped by the server, sent to the browser. No manual action is needed. For Apache: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html.

If you are delivering the code to developers, you could use the gzip command."

Someone told me that if such script compression strategy is used, it will make you very easy to debug:

When you use Firebug to debug javascript in run time, the script you see is the original, uncompressed one, which is much readable.

But if you use the YUI compressor, the script shown in Firebug will be something like this:

var is_moz=(typeof document.implementation.createDocument!="undefined");var is_chrome=navigator.userAgent.toLowerCase().indexOf("chrome")>-1;var selectedTreeNodeIdInOper="";var selectedTreeNodePkInOper="";var winDef="width=490,height=190,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,copyh....

Which is just in a horizontal line and hard to read.

My question is that how can gzip in tomcat send the compressed scripts to the clients meanwhile show the developer the original script? Magic?

diCoder
  • 181
  • 2
  • 3
  • 14

1 Answers1

2

There's two separate issues going on here: compression and minification.

Compression is the process by which the server compresses content (html,css,js) to send to the client (Browser). The browser then de-compresses the content back to exactly what it was before it got compressed. By the time you get to view-source or look at the developer tools in your browser you're seeing the original script. Think of it like sending a zip file to someone. The original file is still there exactly as it was, just wrapped up in a zip.

Compression can be enabled in several places in your app's architecture. You can enable it in your Webserver (you linked to Apache's httpd docs), your app server (Tomcat supports compression) or in your own code (search for 'servlet compression filter' for examples)

Minification (which is what YUI Compressor and other tools do) permanently changes a script, usually creating a -min.js version of the file. This file will be missing newlines and may have variables re-named. Because this altered file is what the server is sending, that's what you'll see in the browser and yes, it's hard to debug. Browser makers have recognized this and Chrome, Firefox and IE11+ support sourcemaps which tell the browser how to map from a minimized version of the code back to the original file. YUI Compressor doesn't support sourcemaps, but other tools like uglify do.

You can use minification and compression together and there are benefits to doing so. See this discussion for more detail.

Community
  • 1
  • 1
barnyr
  • 5,678
  • 21
  • 28
  • Well, the server zip the scripts and send it to client side(browser), so this means that the browser will unzip it before the developer view the source codes right? – diCoder Sep 11 '14 at 16:12
  • That's exactly it! The compression is handled between server at quite a low level so you don't normally see it happening. Chrome will show you whether compression was used. Look at the response headers on a request in the network tab. You'll see a header of Content-Encoding:gzip when compression is on – barnyr Sep 11 '14 at 16:45