Mvc-framework-bundling

提供:Dev Guides
移動先:案内検索

MVCフレームワーク-バンドル

  • バンドル*と*最小化*は、アプリケーションのリクエストのロード時間を改善する2つのパフォーマンス改善技術です。 現在の主要なブラウザのほとんどは、ホスト名あたりの同時接続数を6に制限しています。 これは、一度にすべての追加リクエストがブラウザによってキューに入れられることを意味します。

バンドルと縮小を有効にする

MVCアプリケーションでバンドルと縮小を有効にするには、ソリューション内でWeb.configファイルを開きます。 このファイルで、system.webの下でコンパイル設定を検索します-

<system.web>
   <compilation debug = "true"/>
</system.web>

デフォルトでは、デバッグパラメータがtrueに設定されています。これは、バンドルと縮小が無効になっていることを意味します。 このパラメーターをfalseに設定します。

同梱

アプリケーションのパフォーマンスを向上させるために、ASP.NET MVCは複数のファイルを単一のファイルにバンドルする組み込み機能を提供します。これにより、HTTP要求が少なくなるため、ページのロードパフォーマンスが向上します。

バンドリングは、一意の名前で参照でき、単一のHTTP要求でロードできるファイルの単純な論理グループです。

デフォルトでは、MVCアプリケーションのBundleConfig(App_Startフォルダー内にあります)には次のコードが付属しています-

public static void RegisterBundles(BundleCollection bundles) {

  //Following is the sample code to bundle all the css files in the project

  //The code to bundle other javascript files will also be similar to this

   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery.ui.core.css",
      "~/Content/themes/base/jquery.ui.tabs.css",
      "~/Content/themes/base/jquery.ui.datepicker.css",
      "~/Content/themes/base/jquery.ui.progressbar.css",
      "~/Content/themes/base/jquery.ui.theme.css"));
}

上記のコードは、基本的にContent/themes/baseフォルダーにあるすべてのCSSファイルを単一のファイルにバンドルします。

縮小

縮小化は、変数名を短縮し、不要な空白、改行、コメントなどを削除することにより、javascript、cssコードを最適化する、パフォーマンスを向上させるもう1つの手法です。 これにより、ファイルサイズが小さくなり、アプリケーションの読み込みが速くなります。

Visual StudioおよびWeb Essentials Extensionによる縮小

このオプションを使用するには、まずVisual StudioにWeb Essentials Extensionをインストールする必要があります。 その後、cssまたはjavascriptファイルを右クリックすると、そのファイルの縮小バージョンを作成するオプションが表示されます。

MVC Bundling Minify

したがって、Site.cssという名前のcssファイルがある場合、その縮小版はSite.min.cssとして作成されます。

これで、次回アプリケーションをブラウザーで実行するときに、すべてのcssファイルとjsファイルがバンドルされて縮小されるため、アプリケーションのパフォーマンスが向上します。