はじめに
DojoベースのWebアプリケーション開発は、ローカル・ファイルをブラウザで開く形で作業を進めることができます。サーバーが不要で手軽なため、そのような手法をとることが多いと思います。やがて、アプリケーションがある程度完成してきたら、テスト環境あるいは本番環境のサーバーへの移行をする必要が出てきます。この時点で検討していただきたいのがアプリケーションのソース・コードの「ビルド」です。ビルドはソース・コードを変換してリリース版として適したモジュールを生成するプロセスです。 Dojoツールキットにはソース・コードをビルドする機能が備わっており、Dojoの最も優れた機能の一つとも言われています。中規模以上のDojoベースのアプリケーション開発では欠かすことのできない必須の機能と言えます。
3部構成の本稿では、まず(1)でJavaScriptコードをビルドするとはどういう意味で、どのようなメリットがあるのかを説明し、さらに具体的なビルド・システムの使い方を紹介します。続編の(2)ではビルドに関連したより高度なパフォーマンス・チューニングのテクニックを紹介します。さらに、(3)ではパフォーマンス・チューニング手段としても使えるXDローダーを紹介したいと思います。
ビルドとは
言うまでもありませんが、JavaScriptはインタープリター型の言語です。C言語やJavaのように、実行するためにソース・コードをコンパイルする必要はありません。従って、Dojoベースのアプリケーションも基本的にはソース・コードのままでも動作します。では、Dojoのビルド・システムが何をしてくれるかと言えば、簡単に言えばソース・コードの圧縮です。そのため、Dojoのビルド・システムはコンプレッサー(compressor)と呼ばれることもあります(コンパイラと呼ばれることもあります)。JavaScriptやCSSのコードを解析し、コメントや省略可能なスペースや改行を取り除いたり、ローカル変数名などの識別子を短くしたりすることにより、コードの意味を変えずにバイト数を減らす変換を施します。また、コード取得のリクエスト回数を減らすために、複数ファイルを一つにまとめることも行います。このように、完成したアプリケーションを最適なパフォーマンスで運用するための「リリース版」を作成するのがビルドの主な目的です。
ビルドのメリット
以下、ビルドの主なメリットについて説明します。
ソース・コードのサイズが小さくなる
コードの実行に不要なコメントやホワイトスペースを取り除き、長い変数名も短くしてくれるので、コード・サイズが大幅に縮小されます。コメント等の量により圧縮率は変わりますが、元のサイズのおよそ1/2から1/3程度に圧縮されることを期待できます。コード・サイズの縮小は、コードのダウンロード時間の短縮につながります。また、それを受け取るブラウザにとってもより少ないメモリで効率よく構文解析することができます。結果としてパフォーマンスの向上に寄与します。特に、モバイル・デバイスのように帯域幅、受信サイズ、キャッシュ容量などに制約がある場合は重要な要素になります。
ソース・コードのファイル数が少なくなり、リクエスト回数が減る
サーバーへの要求と応答(ラウンド・トリップ)はコストの高い処理であり、それを多数繰り返すことはパフォーマンスの低下につながります。ビルドを行うことにより、例え100個のJavaScriptファイルがあっても、設定により一つまたは数個のJavaScriptファイルにまとめることができるため、リクエスト回数を大幅に減らすことができます。
CSSファイルに関しても、@importによる外部ファイル参照があればそれをインライン展開することでファイル数を減らしますし、もちろんコメントやホワイトスペースの削除も行います。
また、ウィジェットの実装で使われるテンプレート・ファイルに関しては、ファイルの内容が文字列としてウィジェットのソース・コードに埋め込まれるので、テンプレートを取得するためのリクエストが発生しなくなります。
ソース・コードを読みにくくし(難読化)、解析しにくくする
コメントやホワイトスペースの削除と変数名などの識別子の短縮は、下のコードの例のように、結果としてソース・コードの難読化をもたらします。暗号化しているわけではありませんが、リバース・エンジニアリングなどコードの解析を困難にする効果があります。
for(var i=0,p;obj&&(p=_1c[i]);i++){if(i==0&&this._scopeMap[p]){p=this._scopeMap[p];}obj=(p in obj?obj[p]:(_1d?obj[p]={}:undefined));}return obj;};dojo.setObject=function(_22,_23,_24){var _25=_22.split("."),p=_25.pop(),obj=d._getProp(_25,true,_24);return obj&&p?(obj[p]=_23):undefined;};dojo.getObject=function(_28,_29,_2a){return d._getProp(_28.split("."),_29,_2a);};dojo.exists=function(_2b,obj){return !!d.getObject(_2b,false,obj);};dojo["eval"]=function(_2d){return d.global.eval?d.global.eval(_2d):eval(_2d);};d.deprecated=d.experimental=function(){};})();(function(){var d=dojo;
準備
Dojoをビルドするにはビルド・ツールを使用します。ビルド・ツールはdojo, dijit, dojoxディレクトリと並ぶutilディレクトリに格納されていますが、Dojoの標準のリリース版パッケージ(dojo-release-1.x.x.zip等)にはutilディレクトリが含まれていません。ビルド・ツールを利用するには、ソース・コード版パッケージ(dojo-release-1.x.x-src.zip等)をダウンロードしてください。
また、ビルド・ツールはRhinoと呼ばれるJavaで実装されたJavaScriptインタプリタを利用するため、Javaの実行環境(J2SE 1.4.2以上)が必要です。