web-dev-qa-db-ja.com

ASP.NET MVC4 jquery / javascriptバンドルの使用

標準のMVC4テンプレートを使用してプロジェクトを作成したとき、たとえばjquery-obtrusive、jquery-validate、knockout、jQuery UI全体など、多数のjavascriptが含まれていました。

これのうちどれだけの価値があり、どれだけ捨てられますか？厳密に型指定されたコントローラーを作成すると、create.cshtmlビューが呼び出しを生成することに気付きました。

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

このファイルは正確に何をしますか？保管すべきですか？ BundleConfig.csで最初に定義されたこれらのJSファイルをすべて参照する必要がありますか？または気にしないでください..？

jqueryasp.netasp.net-mvcasp.net-mvc-4bundling-and-minification
32
Baconbeastnz

このファイルは正確に何をしますか？

jqueryvalはファイルではなく、バンドルへの参照です。

MVC4のバンドルは、単一のバンドルにまとめられたスクリプト、スタイル、またはその他のファイルのコレクションです。

BundleConfig.csファイルがApp_Startフォルダーにあります。このファイルには、どのファイルがどのバンドルに追加されるかの設定が含まれています。

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

上記のように、~/bundles/jqueryvalは、指定されたファイルを結合するバンドルの仮想パスです。後でこれを見るとき：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

上記には、その参照でバンドルされたスクリプトが含まれます。

保管すべきですか？ BundleConfig.csで最初に定義されたこれらのJSファイルをすべて参照する必要がありますか？

jqueryvalバンドルの場合、含まれている控えめな検証スクリプトが非常に有用であることがわかるかもしれません。

これらは控えめな検証を管理し、DOMをきれいに保つスクリプトです。

目立たない検証を使用する必要がない場合、または使用したくない場合は、バンドルをコースから削除できます。それを行う場合は、web.configも更新する必要があると思います。必須フィールドをfalseに設定して、プロジェクトが次のようにファイルを検索しないようにします。

<add key="ClientValidationEnabled" value="false" />
<add key="UnobtrusiveJavaScriptEnabled" value="false" />

控えめな検証と控えめな検証の使用の利点と正確な違いは、この記事で非常によく説明されています： Brad Wilson：ASP.NET MVC 3の控えめなクライアント検証

一般的に、必要なものだけを含めるのが良いと思います。バンドルで指定されたすべてのファイルが必要ない場合は、それらのファイルを削除するか、バンドルをすべて除外するか、独自のカスタムバンドルを作成します。

試行錯誤。それらを削除し、ブラウザデバッガコンソールでランダムな例外を見つけた場合は、ファイル/バンドルの一部を追加してみてください。

一般に、バンドリングはスタイルシートでも機能します。

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.selectable.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.autocomplete.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/themes/base/jquery.ui.slider.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"));

開発者にとっての利点は、いくつかのファイルではなく個々のバンドルを参照するだけです。

クライアントにとっての利点は、scripts/cssファイルを取得するためにブラウザーが個別にロードする必要がある回数です。

たとえば、ビューに5つのファイル参照がある場合、クライアントブラウザーは5つすべてを個別にダウンロードします。各ブラウザーには、同時にダウンロードできるファイルの数に制限があります。これは、クライアントの接続が遅い場合、ファイルがロードされるまで数秒待つことができることを意味します。

ただし、5つのファイルすべてを1つのバンドルに構成している場合、ブラウザーはバンドルされた1つのファイルのみをダウンロードします。

さらに、バンドル（またはバンドル内のファイル）が縮小されるため、スクリプトのダウンロードにかかる時間を節約できるだけでなく、ダウンロードサイズも節約できます。

これをテストするとき、デバッグモードでの違いはありません。リリースモードにするか、RegisterBundlesメソッドの下部にあるBundleConfig.csファイルでバンドルテーブルの最適化を有効にする必要があります。

BundleTable.EnableOptimizations = true;

バンドルを使用する必要はありませんが、個々のscripts/cssファイルを自由に参照できます。あなたがそれを必要とするときでもそれは物事を簡単にします。

94
Nope

MVC4および.Net Framework 4.5は、サーバーへの要求の数と、要求されたCSSおよびJavaScriptライブラリのサイズを削減するバンドルおよび縮小技術を提供します。

System.Web.Optimizationクラスは、Microsoft.Web.Optimization dllに存在するバンドルおよび縮小技術を提供します。

バンドルとはバンドルは、単一のHTTPリクエストでロードされるファイルの論理グループです。 BundleConfig.csファイルでBundleCollectionクラスのAdd（）メソッドを呼び出すことにより、CSSとJavaScriptのスタイルとスクリプトバンドルをそれぞれ作成できます。

スタイルバンドルの作成

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.min.css",
"~/Content/mystyle.min.css"));

スクリプトバンドルの作成

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery-1.7.1.min.js",
 "~/Scripts/jquery.validate.min.js",
 "~/Scripts/jquery.validate.unobtrusive.min.js"));
2
Anurag Deokar