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 の状態によって返すファイルが変化するか確認してみましょう。

Accept-Encoding: gzip の有無 Content-Length (bytes)
Accept-Encoding: gzip 有りで prototype.js を読み込む 10437
Accept-Encoding: gzip 無しで prototype.js を読み込む 22583

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

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

Accept-Encoding: gzip の有無 Content-Length (bytes)
Accept-Encoding: gzip 有りで nifty.js を読み込む 4690
Accept-Encoding: gzip 無しで nifty.js を読み込む 4690

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 で圧縮ファイルの方を渡すのがベネ! ──かもね。

[2] このページの一番上へ戻る