標準のMVC4テンプレートを使用してプロジェクトを作成したときに、ASP.NET MVC4 jquery/javascriptバンドル

Question

を使用すると、jQuery-obtrusive、jquery-validate、knockout、jQuery UI全体など、javascriptが含まれていました。

これはどれくらいの価値があり、どれだけ捨てるのですか？あなたが強く型付けされたコントローラを作成したときに、create.cshtmlビューが呼び出しを生成したことに気がつきました。

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

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

Answer 1

このファイルは正確には何ですか？

jqueryvalはバンドルへの参照です。

MVC4のバンドルは、1つのバンドルにバンドルされたスクリプト、スタイルまたはその他のファイルの集まりです。

App_StartフォルダーにBundleConfig.csというファイルがあります。このファイルには、どのバンドルにファイルが追加されているかの設定が含まれています。あなたが~/bundles/jqueryvalの上に見ることができるように

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

はそれに指定されたファイルを組み合わせたバンドルの仮想パスです。それでは、後でこれを見ると、次のようになります。

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

上記のスクリプトには、そのリファレンスの下にバンドルされているスクリプトが含まれています。

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

jqueryvalバンドルの場合、含まれていない妥当性検証スクリプトは非常に便利です。

これらは、邪魔にならない検証を管理し、DOMを素早く清潔に保つスクリプトです。

邪魔にならない検証を使用する必要がない場合、または慎重に使用したい場合は、バンドルをコースから削除することができます。

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

利益と正確な違い：あなたは、私はまた、あなたのプロジェクトを確保するためにfalseに必要なフィールドを設定し、あなたのweb.configを更新する必要がありますこれに類似したファイル、探していることはないと考えていることを行う場合目立つような妥協のない検証の使用については、この記事で非常によく説明されています。Brad Wilson: Unobtrusive Client Validation in 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つのファイルのみをダウンロードします。

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

RegisterBundlesメソッドの最後にあるBundleConfig.csファイルで、バンドルテーブルの最適化を有効にする必要があります。

BundleTable.EnableOptimizations = true; 

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

Answer 2

MVC4および.Net Framework 4.5では、サーバーへの要求数を減らし、要求されたCSSおよびJavaScriptライブラリのサイズを縮小し、単純なワードページのパフォーマンスでページの読み込み時間を向上させ、ページを高速に読み込みます。

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

バンドルとは バンドルは、単一のHTTP要求でロードされるファイルの論理グループです。 BundleConfig.csファイルでBundleCollectionクラスのAdd（）メソッドを呼び出すことで、CSSとJavaScript用のスタイルとスクリプトバンドルをそれぞれ作成できます。私が作成したページにjqueryval使用するかどうかのスタイルのバンドル

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"));