prototype.jsを10KBにする方法

2006-11-20T14:20:42+09:00 追記

「何者か」に攻撃を受けて、このページの内容が差し変わっていました。あわててバックアップファイルから復旧しました（「何者か」 = 酒……）。

prototype.jsを10KBにする方法の続き（.htaccessをスマートに使う） : 亜細亜ノ蛾 に続きを書きました。合わせてどうぞ。

JavaScript ファイルを圧縮する

正真正銘、Prototype（“prototype-1.4.0.js”）を10キロバイト（10,453 bytes）に圧縮して、しかも（当たり前ながら）動作するようにする方法です。

──と聞いて真っ先に思い浮かぶのが「各種JavaScriptファイル圧縮サービス」、という人も多いでしょう。

しかし、自分が試してみたところ、例えば/packer/で圧縮したJavaScriptファイルは上手く動作しませんでした（他は調べてない）。どうも元のファイルで行末に ; が欠けているのが原因らしいです。（ref: #4729 ([PATCH] Make Prototype js-packer compatible) – Ruby on Rails – Trac）

また、仮に元ファイルを修正してから圧縮しても、せいぜい20KB超というところ（それで十分という人も多いと思うが）。

今回紹介するのは、もっとシンプルで効果的な方法です。

2006-11-22T11:43:56+09:00 追記

どうも「mod_gzip ではダメなのか」という意見が多数見られますが、今回の趣旨は「こういう選択もあるよ」という提案なので、それを言われると、ンガググ。転送時に圧縮する方法もあれば、元から圧縮しておく方法もある──選択肢が増えることによって、ちょっと得するひともいるのでは、と思って書きました。

転送時圧縮についてはCSSファイルを圧縮する方法 : 亜細亜ノ蛾で PHP を利用する方法を紹介してあります。

あと、展開後のスクリプトの動作を改善するわけでは無いです。それは、今回の趣旨からは外れているので悪しからず……。

通信時に圧縮

さて、JavaScriptファイル圧縮がうまく行かなかった人たちは、あきらめるか、別の方法を探すことでしょう。そして何人かは、次のことを思いつきます。

「通信するときに (gzip で) 圧縮すればよくね？」

そのあたりの技術は Vitamin Features » Serving JavaScript Fast などで提案されています。──いや、英語だし、じっくり読んだわけじゃないので違うかも？ mod_gzipを使って云々と書いてあるから、たぶん通信時に圧縮するんじゃないかなぁ……（ぶつぶつ）。

もちろん、この方法も有効だと思いますが、アクセス数が増えるたびにサーバに負担がかかることは間違いないでしょう。設定次第で何とかなるかもしれませんが、レンタルサーバ者にとっては、ね。

ファイル自体を圧縮！

ようやく本題です。上記のようにぐるぐると議論が一巡した時に出てきた発想と思われるのが、

「ファイルそのものを （gzip) で圧縮すればよくね？」

ちょwwwおまwwwwww

「そんで、<script type="text/javascript" src="prototype.js.gz"></script>みたいに読み込めばおk（Compressed JavaScript | Joseph Scott’s Blog）」

m9(^Д^)ぷぎゃー。そんなことできるわけ──できちゃったよ！

ということで、やっつけ作業でサンプル作りました。

prototype.jsをgzip圧縮して利用するテスト

非同期通信のリクエスト数を取得するからパクったコードなので、問題があったら削除/訂正します。

またSafariか

──と、勢いだけで書きましたが、どうも Safari で問題があるらしい。

というか！ いろいろ調べてCompressed JavaScript | Joseph Scott’s Blogをよく読んだら、コメント欄に日本人の方が。そして、ちゃんと自身のブログで解説してくださっている!!

こぶたのラッパ : 世界の片隅で.jgzと言ってみるによると、Safariでgzip 圧縮されたJavaScriptを受け付けてくれないとのことで、.htaccess を使ったスマートな解決策が書いてあります。

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ".*Safari.*" [OR]
RewriteCond %{HTTP:Accept-Encoding} !gzip
RewriteRule (.*)\.jgz$ $1\.js [L]
AddType "text/javascript;charset=UTF-8" .jgz
AddEncoding gzip .jgz

さらに圧縮する方法も書いてありますね。

ファイルサイズ | ファイル名

47,445 bytes | prototype.js（デフォルト）

32,717 bytes | prototype_compress.js（Rhinoを使って圧縮）

10,537 bytes | prototype.jgz（gzip圧縮）

9,464 bytes | prototype_compress.jgz（Rhino + gzip圧縮）

こぶたのラッパ : 世界の片隅で.jgzと言ってみる

──が、今回は何となく“.gz”な拡張子そのままで反応を見てみることに（調べるのにﾂｶﾚﾀﾖ……）。

終りに

もしかすると、今回書いたことはとっっっくの昔に議論し尽されていて、「何を今さら……」なのかも。自分が知らないだけで、もの凄く重大な欠陥があったり（Safari の場合を除いても）。

しかし、ある人にとっては大変有益な情報に、なったらいいな、と思って勢いのままに書きました。「prototype.js が 10KB だったら使ってもいいよね」という人も多いのでは。