How to serve pre-gzipped static content

Extjs is great because it can provide rich functionality/UI from static js content.

Here's how I got my apache2 server to serve pre-gzipped static js and css content.

First, I'm on a Macintosh, so I needed to enable .htaccess

To do so, go to (using sudo vim) /etc/apache2/httpd.conf and change the following section:

<Directory />
Options FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all
</Directory>

To enable .htaccess, change AllowOverride None to AllowOverride All. Also, change :<Directory "/Library/WebServer/Documents">, from AllowOverride None to AllowOverride All.

Now, restart the apache server to reflect the changes in httpd.conf

sudo apachectl -k restart

Now, we have .htaccess enabled. To check if it works, go to /Library/WebServer/Documents and make a .htaccess file. Inside, put 

RewriteEngine On 

and a random string on the next line. Go to localhost, and you should see

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, you@example.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

---

Apache/2.2.22 (Unix) DAV/2 Server at localhost Port 80

If this pops up, it's working.

Now, under RewriteEngine On put

AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

EDIT: The above .htaccess version doesn't seem to be working... The below version worked.
or




#Serve gzip compressed CSS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]

# Serve gzip compressed JS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]

# Serve correct content types, and prevent mod_deflate double gzip.
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1]

Now, if you make gzipped versions of your files on the web document, with

gzip foo.js -c > foo.js.gz

and test it out, surprisingly it still won't work. You'll get some funny error about 

"Unexpected Token ILLEGAL"

The trick is to make another change to your httpd.conf file.

Simply enable 

AddEncoding x-gzip .gz .tgz

and you should be good to go!

References: 

how to modify .htaccess
https://blog.jcoglan.com/2007/05/02/compress-javascript-and-css-without-touching-your-application-code/
and

http://stackoverflow.com/questions/9076752/how-to-force-apache-to-use-manually-pre-compressed-gz-file-of-css-and-js-files

Add encoding on httpd.conf

http://drupal.stackexchange.com/questions/35073/javascript-aggregation-issue-with-new-server

enabling .htaccess
http://chibimagic.wordpress.com/2009/02/27/apache-htaccess-mac-os-x/