原典:New Bundling and Minification Support (ASP.NET 4.5 Series)
バンドルおよびミニファイ・サポートの追加(ASP.NET 4.5シリーズ)
ASP.NET 4.5のブログ投稿シリーズで、今回は6回目になります。
次期リリースの.NETおよびVisual Studioには、新機能が非常に多く含まれています。ASP.NET 4.5では、WebフォームとMVC、またそのどちらもの基盤となっているASP.NETコアも含め、非常に素晴らしい改善点が多く見られます。
本日の投稿では、アプリケーションのパフォーマンス改善に役立つ、ASP.NETに追加されたバンドルおよびミニファイのビルトインサポートについてカバーします。この機能は、ASP.NET MVCおよびASP.NET Webフォームのソリューションを含むすべてのASP.NETアプリケーションで使用できます。
バンドルおよびミニファイの基礎
Web検索にモバイルデバイスを使用する人が増えるにつれ、モバイル用に構築したWebサイトやアプリのパフォーマンスの重要性も高まってきます。スマートフォンでいろんなサイトのロードを試しましたが、携帯ネットワークを通じた遅いロードだけはフラストレーションに耐えきれずついにあきらめました。このように、サイトやアプリが遅くロードされるようなパフォーマンスが悪い場合には、せっかくの潜在顧客を逃すことになりかねません。強力なデスクトップマシンであっても、サイトのロード時間や見かけのパフォーマンスが、顧客の認識に大きく影響します。
現在の多くのWebサイトは、問題の切り分けとコードベースをしっかり保つために、複数のJavaScriptやCSSファイルから構成されています。コーディングの観点からすればこれは優れた慣習なのですが、Webサイトの全体のパフォーマンスからすれば、残念な結果になるケースもしばしばです。複数のJavaScriptやCSSファイルは、ブラウザから複数のHTTPリクエストを要求し、これによりロード時間のパフォーマンスが悪くなってしまうのです。
簡単な例
以下は、ローカルWebサイトをIE9で開いて、IEにビルトインされたF12開発者ツールを使用してネットワークのトラフィックを記録したものです。ご覧のとおりですが、Webサイトは5つのCSSと4つJavaScriptファイルから構成されており、ブラウザはこれらをダウンロードする必要があります。各ファイルは、現在ブラウザで別々に要求され、それぞれをサーバーが返しており、そのプロセスは、該当ファイルの数に応じて大幅な時間が取られます。
バンドル
ASP.NETは、HTTPリクエストを少なくするために、複数のCSSやJavaScriptの『バンドル』または『組み合わせ』を簡単に行う機能を追加しています。これにより、ブラウザがファイルのリクエスト数を減少させ、ひいてはファイル取得時間を減少させます。以下は、上記のサンプルの更新バージョンで、この新しいバンドル(JavaScriptおよびCSSに対して1つずつのリクエストにする)機能を活用しています。
これでブラウザは、サーバーに送るリクエストの数を減らせます。個々のファイルコンテンツは、同じレスポンス内にバンドル/組み合わせされますが、ファイルの内容は変わりません。そのため、全体のファイルサイズは、バンドルされる前とまったく同じです。ローカルの開発機(ブラウザとサーバー間のネットワークの待ち時間が最小のケース)であっても、CSSとJavaScriptファイルのバンドルは同じように全体のページロード時間を約20%減少させます。遅いネットワークを通じたパフォーマンス改善なら、より良い結果が得られます。
ミニファイ化
ASP.NET次期リリースでも、コンテンツのダウンロードサイズの減少および『ミニファイ』が簡単になる新機能を追加しています。これは、空白文字、コメント、その他不必要な文字を、CSSおよびJavaScriptから削除するプロセスです。この結果、ファイルは小さくなり、ブラウズでのダウンロードやロードが速くなります。以下のグラフは、バンドルとミニファイが同時に使用された場合のパフォーマンス改善度合いを表しています。
私のローカル開発機(ネットワークの待ち時間が最小のケース)上でも、現在では最初に比べ40%のパフォーマンス改善が行われています。遅いネットワーク(特に国外の顧客との)上では、さらに大幅な改善になるはずです。