今日、インターネット上でアプリケーションを開発するとき、クライアントの最適化の問題がますます頻繁に発生します。 以前に、クライアントに送信されたページに情報のみが含まれていた場合、今日ではそのようなページに多くのJavaScriptコードが含まれることが非常に多いです。 最高のパフォーマンスを実現し、サーバーの負荷を軽減するために、クライアントの最適化ルールが適用されます。
この記事は、.netプロジェクト用の便利なJavaScriptクライアント側最適化ツールであるBundlerについて説明しています。
はじめに
JavaScriptに関するクライアントの最適化には、次のアクションが含まれます。
- 適切なツールを使用したJavaScriptコードの最小化： YUI Minifier 、 Microsoft JsMin 、 Google Closureなど。
- 静的ファイル（JavaScriptを含む）へのリクエストの数を減らして、複数のファイルを1つにまとめることにより、リクエストの数を減らします
- クライアント側で静的ファイル（JavaScriptを含む）をキャッシュします。
- クライアントとサーバー間のトラフィックのGZip圧縮。
JavaScriptファイル（およびその他の静的ファイル）をキャッシュすると、ブラウザーは、以前にダウンロードした独自のキャッシュからのファイルを使用して、サーバーからのデータを要求しなくなります。
GZip圧縮を使用してクライアントとサーバー間でデータを転送すると、サーバーで圧縮されてクライアントのブラウザーで展開される送信トラフィックの量を大幅に削減できます。 GZip圧縮は、IISサーバーで有効にできます（図1）。
図 1. IIS 7.5サーバーで圧縮を有効にする
この記事では、新しいBundlerツールを使用してASP.NETで最初の2つのルールを適用することに焦点を当てます。 クライアント側でJavaScriptファイルをキャッシュする構成と、IISサーバーでトラフィック圧縮を設定する微妙な点は、この記事の範囲外であり、考慮されません。
バンドラー
Bundlerは、JavaScriptファイルを最小化および結合するためのルールを簡単かつ透過的に適用できるソリューションです。 さらに、Bundlerには、クライアント側のJavaScript最適化を簡単に操作できる便利な機能が多数含まれています。
BundlerはCodeThinkedブログの著者であるJustin Etheredgeによって書かれています。 こことここでは、彼のユーティリティのトピックに関する著作権の記事を読むことができます。 Bundlerの使用を開始するには、GitHubのページからソースパッケージをダウンロードする必要があります 。 ダウンロードしたプロジェクトをVisual Studioに読み込んだ後、 Bundler.Frameworkプロジェクトをコンパイルする必要があります。 その結果、アセンブリBundler.Framework.dllを取得します。そのアプリケーションについては後で説明します。
バンドラーアプリケーション
Bundlerの使用方法を示すために、ASP.NET MVCプロジェクト（Visual Studio 2010 RC）を使用します。これはデフォルト（RCバージョン）で作成されます。 デフォルトでは、プロジェクトはクライアント検証を使用しません。 フォームの前に<％Html.EnableClientValidation（）を指定して、登録フォームに追加します。 ％> （図2）。
図 2.クライアント検証を有効にした登録フォーム
クライアントでフォーム検証を機能させるには、いくつかのJavaScriptファイルを接続する必要があります。 Site.Masterに必要なファイルを追加します（図3）
図 3. Site.Masterへのスクリプトの追加
実行して、クライアント検証が正常に機能することを確認します。 ただし、いくつかの質問に直面しています。まず、リリース用にスクリプトを接続したため、デバッグ段階でスクリプトを使用するのは不便です。 次に、クライアントの最適化のルールに基づいて、一度に3つのスクリプトを要求するようにクライアントに強制することは望ましくありません。 ソリューションを探す代わりに、 Bundlerを使用します。
Bundler.Framework.dllアセンブリをプロジェクトに接続することにより、Bundlerのすべての機能をすぐに使用できます。 Bundler機能を使用してスクリプトを使用するためのコードを書き直します（図4）。
図 4. Bundlerにスクリプトを含める
プロジェクトを実行し、最終的に何が起こったかを確認します。 ブラウザでページのソースコードを確認すると、スクリプトがまだ個別にレンダリングされていることがわかります（図5）。
図 5.デバッグモードでのBundlerの結果
この動作は、実際にはバンドラーの便利な機能の1つです。 デバッグモードでプロジェクトをビルドすると、Bundlerはスクリプトを処理せず、スクリプトを変更せずに表示できます。 これを利用して、スクリプトのデバッグバージョンをスリップし、同時にweb.configでdebug = "false"を設定してプロジェクトのデバッグをオフにします。 コンパイルして実行し、結果のマークアップを再度確認します（図6）。
図 6.デバッグなしのBundlerの結果
楽しみのために、結果のコードAjaxBundle.jsを見てください（図7）。
図 7.バンドラーの結果
ご覧のとおり、クライアントの検証にスクリプトのデバッグバージョンを使用していましたが、Bundlerは独立してそれらを1つのファイルに結合するだけでなく、不要なスペースやコメントを排除してコンテンツを圧縮しました。
Bundlerは、生成されたファイルを照会するために、現在の時刻の文字列値が割り当てられた内部パラメーターrを使用することに注意してください。 このパラメーターは、生成されたスクリプトアセンブリのバージョン管理を具体的に指定するために使用されます。 バージョン管理を行わないと、ブラウザは重要な変更を行わずに古いバージョンと同じ名前のスクリプトをキャッシュでき、クライアントの更新された機能は使用できません。
おわりに
この記事では、クライアント最適化のいくつかの有用なプラクティスを柔軟に実装するのに役立つメカニズムであるBundlerの動作を検証しました。 最初に、BundlerはJavaScriptファイルを圧縮し、次に、それらを1つの共通ファイルに結合します。
Bundlerは、JavaScript出力ファイルの自動生成とバージョン管理をサポートしています。 さらに、Bundlerはプロジェクトの現在のビルドモードを考慮し、デバッグバージョンの場合、ソーススクリプトを変更せずに作業できるようにします。
Bundlerは、注目に値する非常に便利なツールのようです。 プロジェクトはオープンソースで配布されており、必要な機能を追加することにより、独自のリクエストでそれを補完できます。
プロジェクト内の多くのJavaScriptファイルを使用して作業を最適化するソリューションを探している場合は、Bundlerが適しています。
参照資料
- テストプロジェクトのソースコードhttp://cid-e6d57595d91e592f.skydrive.live.com/self.aspx/Share/BundlerTest.zip
- githubのBundlerプロジェクトhttp://github.com/jetheredge/javascript_bundler
- トピックに関する著者記事： 最初と2番目