このブログのTwitterフィードはClosure Toolsで作られています。
Closure Toolsのなかの Closure Compiler と Closure Library について簡単に説明します。
Closure Compiler
一般的に、JavaScriptは書いたコードはそのままサーバーにアップし、ブラウザに読み込ませて使用しますが、最近では、YUI Compressor や Packer などのJavaScript圧縮ツールを使ってファイルサイズを最小限におさえるケースも増えています。ファイルサイズが軽くなるとページの読み込み速度も上がるため、ユーザビリティも向上します。Closure Compiler はその考え方をさらに押し進めた JavaScript 圧縮ツールです。
例えば以下のようなコードがあったとします。
function printHello() {
alert("Hello!");
}
printHello();
これをYUI Compressorなどの一般的なJavaScript圧縮ツールに掛けると以下のようになります。
function printHello(){alert("Hello!")}printHello();
これはコード上の不必要な改行・空白が除去されています。ちなみにこのコードを無名関数内”(function(){ … })();”に入れ、ローカル変数として扱わせると “printHello” という関数名も “a” に変換されます。
(function(){function a(){alert("Hello!")}a()})();
で、本題ですが Closure Compiler も基本的には同じような処理が行われます。しかしさらに進んだ機能として、コンパイル実行時に、JavaScript のコードを追って1度しか使われていない変数・関数があれば、中身を展開したり、使われていない変数・関数は削除する、等の処理をしてくれます。※これは ADVANCED_OPTIMIZATIONS というオプションをつけてコンパイルすることで発動します。
上記のコードを Closure Compiler で ADVANCED_OPTIMIZATIONS オプションを付けてコンパイルを実行すると、以下のコードのようになります。
alert("Hello!");
ここでは、printHello という関数は一度しか使われていないため、関数の中身が展開され、alert(“Hello!”) のみが残りました。
このように、Closure Compiler を使用すると JavaScript コードを最大まで縮小化し、最適化をしてくれます。また、コードにシンタックスエラーがある場合、コンパイルエラーが出るのでデバッグもしやすくなります。
Closure Compiler は公式のWEBツールも用意されており、以下から気軽に利用することができます。
http://closure-compiler.appspot.com/home
Closre Library
Closure Library とは Google によって開発されたJavaScriptのライブラリです。クロスブラウザになっており、GMail などの多くの Google プロダクトに利用されている実績もあるとの事です。
このライブラリの大きな特徴は YUI や jQuery などとは違って、ライブラリをそのまま使用するということは想定されておらず、 Closure Library によって最適化されることを前提に作られています。開発効率を高めるために、ライブラリは細かくモジュール化されており、そのなかでも細かく依存関係が存在しています。これらの依存関係を最終的に一つのコードにまとめると、ファイルサイズは肥大化し、読み込み速度が低下してしまいます。そこで Closure Compiler を使用することで、コードの依存関係を保ちつつ、使用していない関数・変数は削除され、JavaScript コードの最適化をしてくれます。
参考までにこのブログで使われているコードの最適化前と最適化をお見せします。
コンパイル前・全依存コードの結合版（531.42KB）
http://static.fujikkys.com/src/combine.js
コンパイル後（38.83KB）
http://static.fujikkys.com/src/compiled.js
コンパイル前の約7%のサイズまで圧縮されています。クロスブラウザを維持しながら、極限までコードを圧縮できるのは Closure Libray と Closure Compiler の魅力のひとつです。
実際の利用方法などはまた次回書いてみたいと思います。