prototype.jsを10KBにする方法の続き（.htaccessをスマートに使う）

2006-11-26T00:53:01+09:00 追記

いろいろ問題がありました（またか……）。記事を修正し、新しくサンプルページ（prototype.jsをgzip圧縮して利用するテスト（Safari 対応版））を作りました。

ありがたや！

prototype.jsを10KBにする方法 : 亜細亜ノ蛾 は思っていた以上に反響（というかブクマ）があって、うれしい限り。

──といいたいところですが、なんというか、自分は return false ってなんスか？ というひと（JavaScript 解ってない）なので、もうちょっと「それは違うよ」という批判記事が読みたいような。──スンマセンね、ツン照れというか天の邪鬼なので。

.htaccess をスマートに使う

そんな中で、今回はいいモン仕入れて来たよー、というハック（むしろ基本テク？）。

Accept-Encoding に gzip が含まれるときだけ gzip 圧縮された prototype.js.gz を、 含まれないときは prototype.js を返すようになる。

odz buffer – Apache で gzip 圧縮されたファイルを返す

さっそくやってみた

ほうほう、と JavaScript ファイルをぶっ込んであるディレクトリに下記を記述した .htaccess を置いてみた。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

odz buffer – Apache で gzip 圧縮されたファイルを返す

ディレクトリ内には prototype.js（gzip 圧縮なし） と prototype.js.gz（gzip 圧縮あり） があると思いねェ（ベベン！）。熱くほてった下記のコードでソイヤっと読み込みング。

<script type="text/javascript" src="prototype"></script>

──404 エラー。あれ？ と思って id:odz さんの記事と Content Negotiation でリクエストに応じて gzip 圧縮ファイルを返すを読み直すと──ああ、Content Negotiation が働いていないのでした。MultiViews ってやつですよね。

ただ、ふと思いついて

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

と記述すると、上記の .htaccess のままで

1. Accept-Encoding に gzip を含まない場合は prototype.js をそのまま読み込む
2. Accept-Encoding に gzip が含まれ、prototype.js.gz が存在すれば prototype.js.gz を読み込む
3. Accept-Encoding に gzip が含まれ、prototype.js.gz が無ければ prototype.js を読み込む

という、理想的な動きを！ ktkr!!

ｼﾝｼﾞﾗﾚﾅｰｲ という人のために

Web-Sniffer で Accept-Encoding の状態によって返すファイルが変化するか確認してみましょう。

この通り、同じ prototype.js にアクセスしても、状態によって gzip 圧縮してあるファイルを UA に渡しています。

ちなみに、.js.gz がない場合はこんな感じ。404 エラーになったりはしません。

Safari 使いの反応求む！

ところで、今回の前提として、

Safari って Content-type: application/x-javascript 、 Content-Encoding: gzip にしておいても gzip 圧縮された JavaScriptソースを正しく扱えなかったりするんだろうか。

odz buffer – Apache で gzip 圧縮されたファイルを返す

という問題がまだ残っておりまして。

どう考えても「Safari が gzip 圧縮されたファイルを扱えない」わけは無いのですが、問題の焦点は「Safari が gzip 圧縮された JavaScript ファイルを扱えない」が true か false か──。

ブクマで好いからお返事待ってます＞ Safari 使いの皆様

この問題が解決すれば、「Safari には .js のファイルを 通信時に gzip 圧縮して渡す」と、ディ・モールトいい感じ。

2006-11-20T22:58:35+09:00 追記

オラオラの中の人、oscar さんから有り難いコメントをいただきました！ 検証の結果、やっぱり Safari は「.js.gz な JavaScript ファイル」は処理できないみたいです。

ということで、.htaccess にちょっと一行追加。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} !.*Safari.*
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

UA を Safari にして JavaScript ファイルにアクセスすると、圧縮していないファイルを返すようになりました（Content-Length が 22583 bytes になっている）。メデタシ（──かな？）。

2006-11-26T00:55:23+09:00 追記

odz buffer – Safari と gzip 圧縮 JavaScript と ユンサンの／???／YungSang’s: .jgz と .js.gz と Apache の設定を参考に、新しく下記の .htaccess ファイルとサンプルページを作りました。ありがとうございます！

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
ForceType application/x-javascript
AddEncoding x-gzip .gz

prototype.jsをgzip圧縮して利用するテスト（Safari 対応版）から動作を確認してみてください（こんどこそ、おk？）。

ところで

今さらながら、gzip 圧縮するのは JavaScript に限らず、CSS や HTML でもいいわけで。デザインに凝ったサイトは CSS のファイルサイズが大きくなりがち。CSS も .css.gz なファイルを用意しておいて、上記の .htaccess で圧縮ファイルの方を渡すのがベネ！ ──かもね。