ASP.NET MVC Bundle で読み込みパフォーマンスを改善

外部ファイルとした JavaScript や CSS ファイルを大量に読み込ませようとすると、サーバーへの要求が多く発生し、ページの読み込みが遅くなります。
ASP.NET MVC の Bundle 機能を使うと、これら静的ファイルの読み込みのパフォーマンスを改善させることができます。

バンドルとは

ソリューションの中にある、App_Start フォルダ下に BundleConfig というファイルがあります。これは、ページに読み込ませる JavaScript, CSS のファイルを管理するためのもので、Bundle と呼ばれており、ASP.NET MVC 特有の機能です。

複数のファイルをまとめる（バンドル）

Bundle すると、読み込ませる JavaScript（スクリプトファイル）、CSS をひとつにまとめてくれます。ページ要求数を減らすことでパフォーマンスの向上を狙っています。

ファイルのミニファイ化

また、JavaScript, CSS ファイルの中にあるコメントや空白を削除して（ミニファイ化）ファイルサイズを減らすことで、ネットワーク負荷も低減させてくれます。

BundleConfig の設定方法

設定方法は、BundleConfig クラスの RegisterBundles メソッド内に、以下の文を加えるだけです。 true にすると、JavaScript, CSS ファイルがミニファイ化されてしまい、デバッグ時に追えないため、リリース時のみ有効にする設定がオススメです。

#if DEBUG == false
            BundleTable.EnableOptimizations = true;
#endif