32

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

このうち、どれだけを保持する価値があり、どれだけを捨てる価値がありますか? 強く型付けされた Controller を作成すると、create.cshtml ビューが次の呼び出しを生成することに気付きました。

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

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

4

2 に答える 2

99

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

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

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

どのファイルがどのバンドルに追加されるかの設定を含む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"));

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

クライアントにとっての利点は、スクリプト/css ファイルを取得するためにブラウザが実行する必要のある個々の読み込みの数です。

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

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

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

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

BundleTable.EnableOptimizations = true;

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

于 2012-08-14T00:59:53.123 に答える
2

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"));
于 2015-07-09T12:56:22.043 に答える