圧縮した JavaScript ファイルを利用する

gzip で圧縮した JavaScript ファイルを使って、ダウンロード時の帯域を節約することができる。

基本は、.jgz と .js.gz と Apache の設定のとおり。

これをベースに自分なりに書き換えてみた。

Apache を用いる。.htaccess に書くこともできるけれども、オーバーヘッドがあるので、httpd.conf に書くという前提で、以下のようにする。

<Directory "/htdocs/javascripts">
  <Files ~ "\.js">
    RewriteEngine on
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME}\.gz -s
    RewriteRule ^(.+)$ $1.gz

    ForceType text/javascript
    AddEncoding x-gzip .gz
  </Files>
</Directory>

mod_rewrite という URL => ファイルマッピング用のモジュールを使うので、これは有効にしておかなければならない。

ここでは、Apache のドキュメントルートを /htdocs と考えよう。すると、たとえば /htdocs/javascripts/test1.js.gz に対しては次のようにアクセスできる。

<html>
<head>
<script type="text/javascript" src="http://example.com/javascripts/test.js"></script>
...

面白いのは、ファイル名としては、"test1.js.gz" なのに、"test1.js" としてアクセス可能なことだ。さらに、もし "test1.js.gz" はないが、"test1.js" はある場合ならば "test1.js" の内容が圧縮されずに返却される。つまり "*.js" でも "*.js.gz" のどちらもが利用可能で、両方ある場合は、"*.js.gz" のほうが優先されるということだ。

一応興味のある人向けに、httpd.conf の中身を解説しておくと以下の通り。

# /htdocs/javascripts とそのサブディレクトリに対してのみ有効な設定
<Directory "/htdocs/javascripts">
  # ".js" で終わる URL に対してだけ有効な設定
  <Files ~ "\.js$">
    # Rewrite エンジン使用開始(お約束)
    RewriteEngine on
    # %{HTTP:xxx} は xxx というリクエストヘッダを意味する。
    # この場合 Accept-Encoding というリクエストヘッダに 
    # "gzip" という文字列が含まれていたら、次に進む
    RewriteCond %{HTTP:Accept-Encoding} gzip
    # /htdocs/javascripts/xxx.js.gz というファイル名はあれば次へ進む。
    RewriteCond %{REQUEST_FILENAME}\.gz -s
    # RewriteRule の第1、第2引数は、s/xxx/yyy という正規表現を
    # 用いた置換コマンドの xxx, yyy にそれぞれあたる。
    # 第一引数で URL 全体にマッチ。第2引数でそれに ".gz" を付加。
    RewriteRule ^(.+)$ $1.gz

    # 強制的に Content-Type を "text/javascript" に。
    ForceType text/javascript
    # .gz という拡張子については、Content-Encoding レスポンスヘッダを gzip に設定
    # そうすることで、ブラウザは自動的に受け取ったファイルを解凍してくれる。
    AddEncoding x-gzip .gz
  </Files>
</Directory>

Apache の設定はあまり詳しくないので間違っていたらご指摘ください。つか、Apache 難しすぎ〜。