ASP.NET内でのバンドルおよびミニファイの使用
ASP.NETの次期リリースでは、バンドルとミニファイをプロジェクト内で活用でき、上記のシナリオのようなパフォーマンス改善の確認が、簡単にできるようになります。そうすることで、ASP.NETは動的にバンドル/ミニファイを実行するランタイムサポートを追加するので、ビルドプロセスで、独自ツールを実行する手間が省けます(パフォーマンスを良くするために結果をキャッシュします)。これによりクリーンな開発体験ができ、これらの新機能を非常に簡単に活用できます。
では、4つのJavaScriptと6つのCSSファイルを持つ簡単なプロジェクトがあると仮定します。
.cssファイルのバンドルとミニファイ
例えば、ページ上の上記の『Styles』フォルダにあるすべてのスタイルシートを参照したいとします。現時点では、すべてを参照するには複数のCSSを追加しなければなりません。これは、6つの別々のHTTPリクエストとして解釈されます。
バンドル/ミニファイの新機能により、フォルダ(今回のケースでは『styles』)パスに『/css』を追加したものへ、ただURLリクエストを送ることで、Stylesフォルダにすべての.cssファイルをバンドルおよびミニファイできます。以下がその例です。
これにより、ASP.NETはディレクトリをすべてスキャンし、その中の.cssファイルをバンドルおよびミニファイし、ブラウザへすべてのCSSコンテンツを1つのHTTPレスポンスで送り返します。
これを動作させるために、他のツールやプレ・プロセッサーなどを実行させる必要はありません。実行時にパフォーマンスが悪化することなく、クリーンにCSSをそれぞれの論理.cssファイルに分けることができ、クリーンな開発体験が継続して行えます。Visual Studioデザイナにも、この新しいバンドル/ミニファイのロジックが含まれているので、VS内でもWYSWIYGデザイナ体験が引き続き可能です。
JavaScriptファイルのバンドルとミニファイ
上記のCSSのアプローチと同じく、すべてのJavaScript を1つのレスポンスにバンドルおよびミニファイしたい場合は、フォルダ(今回のケースでは『scripts』)パスに『/js』を追加したものへ、URLリクエストを送ります。
これにより、ASP.NETがディレクトリをスキャンし、その中の.jsファイルをバンドルおよびミニファイし、すべてのJavaScriptコンテンツを1つのHTTPレスポンスでブラウザへ送り返します。繰り返しですが、独自のツールやビルドステップはこれを行うのに必要ありません。また、これはすべてのブラウザで動作します。
バンドル内でのファイルの順番
デフォルトでは、ASP.NETがファイルをバンドルすると、最初はソリューションエクスプローラで表示されているように、アルファベット順にソートします。そして、jQuery、MooTools、Dojoなど、有名なライブラリや独自の拡張が他のものより先にロードされるように、自動的に並べ替えられます。上記に表示されているScriptsフォルダを統合したバンドルのデフォルトの順番は以下のとおりです。
- Jquery-1.6.2.js
- Jquery-ui.js
- Jquery.tools.js
- a.js
デフォルトでは、CSSファイルもアルファベット順にソートされた後に、並べ替えられ、(もしあれば)reset.cssおよびnormalize.cssは、他のファイルよりも前にきます。上記のStylesフォルダのバンドルされた時のデフォルトの順番は、以下のとおりです。
- reset.css
- content.css
- forms.css
- globals.css
- menu.css
- styles.css
ソートは完全にカスタマイズ可能で、簡単に好きな順に変更できます。初期設定の順番は、そのまま使用してうまくいくようになっています。
制限のないディレクトリおよびサブディレクトリの数
上記の例では、アプリケーションに対して、 『Scripts』および『Styles』フォルダが1つずつになっています。この形は特定のアプリケーション(例えば、1ページのアプリケーションなど)では動作します。しかし、通常アプリケーションには、複数のCSS/JSのバンドルが必要になってきます。例えば、すべてのページが使用するコアのJSやCSSファイルがある『common』バンドルと、そして全体では使用しない特定のページやセクション用のファイルなどです。
バンドル/ミニファイのサポートは、プロジェクトにあるディレクトリやサブディレクトリの数に制限なく使用できるので、コードの構造化が簡単にでき、バンドル/ミニファイを最大限に活用できます。
