If I used gzipped JavaScript files, I get illegal character/token errors in both Chrome and Firefox

Question

I'm using the built-in server on my MacBook.

Say my script is foo.js. This works in both my test browsers (Firefox 10, Chrome 17):

<script type="text/javascript" src="foo.js"></script>

If I gzip the file, however, both browsers will give me an illegal token/character error after I change the above line to this:

<script type="text/javascript" src="foo.js.gz"></script>

What gives? Does the type need to be changed too or something? Where is this kind of practice documented? Whenever I see it mentioned on the web to "zip your scripts!", no one ever bothers to mention that you need to do anything special with the links.

Answer 1

The webserver needs to tell the browser that the content is gzipped. This is done using the content-encoding header. Maybe you can configure your webserver to supply this header with files ending in .gz.

Instead of compressing the files statically, it is also common for the webserver to have functionality to compress documents on-the-fly. This means that you put the normal foo.js file in the document root, and configure the webserver to compress it when sending it to the client.

Answer 2

I had similar kind of error. Check in the network tab corresponding to your foo.js. In response header, the requested header should have Content-Encoding:gzip and Content-Type:application/javascript. Otherwise, browser will not decompress your file. Browser should know what kind of content encoding is done over the file.