@ Scripts.Render(“〜/ bundles / jquery”)を使用する理由


217

どうやって

@Scripts.Render("~/bundles/jquery")

このようにhtmlからスクリプトを参照するだけとは異なります

<script src="~/bundles/jquery.js" type="text/javascript"></script>

パフォーマンスの向上はありますか?


私はタイプ=「テキスト/ cssの」を追加するにはどうすればよい- stackoverflow.com/questions/15662096/...
LCJ

回答:


288

バンドルとは、書式設定なしでいくつかのJavaScriptファイルまたはスタイルシートファイル(圧縮とも呼ばれます)を単一のファイルに圧縮して、ページをロードするための帯域幅と要求の数を保存することです。

例として、独自のバンドルを作成できます。

bundles.Add(New ScriptBundle("~/bundles/mybundle").Include(
            "~/Resources/Core/Javascripts/jquery-1.7.1.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-1.8.16.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.unobtrusive.min.js",
            "~/Resources/Core/Javascripts/jquery.unobtrusive-ajax.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-timepicker-addon.js"))

次のようにレンダリングします。

@Scripts.Render("~/bundles/mybundle")

もう一つの利点@Scripts.Render("~/bundles/mybundle")ネイティブオーバー<script src="~/bundles/mybundle" />IS @Scripts.Render()尊重するweb.configデバッグ設定を:

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

その場合debug="true"は、縮小せずに、ソーススクリプトごとに個別のスクリプトタグをレンダリングします。

スタイルシートの場合、StyleBundleと@ Styles.Render()を使用する必要があります。

各スクリプトまたはスタイルを単一のリクエスト(スクリプトまたはリンクタグを使用)でロードする代わりに、すべてのファイルが単一のJavaScriptまたはスタイルシートファイルに圧縮され、一緒にロードされます。


9
ただ不思議に思っています:そのバンドルのどこかにファイルが保存されていますか、それともメモリに存在していますか?
エリオット

15
キャッシュに保存されます。
NicoJuicy 2013

4
また、CDNが使用できない場合にCDNを自動的に使用してローカルスクリプトにフォールバックするように設定することもできます。それはかなり滑らかです。
Dan Esparza 2013年

39
これを行うことには追加の利点があります。デバッグ時、Scripts.Renderは各ファイルをバンドル化せずに出力します。これにより、ローカル開発の負担が大幅に軽減されますが、ライブ環境では、バンドルされた/縮小された結果が出力され、上記のようにパフォーマンスが向上しますが、コードを変更する。
Sethcran 2013

9
MVC4(Visual Studio)の「基本」テンプレートでは、「BundleConfig.cs」(App_Startフォルダ)にバンドルが用意されています。
Apolo 2014

51

次のものも使用できます。

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/mybundle")

Charset、Typeなどを使用する必要があるシナリオで出力の形式を指定するには


3
requirejsモジュールのロードにも非常に便利
Phil

13
...またはasync属性を追加します。
Christoph Fink 2014年

7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
Robert McKee

1
...またはcrossorigin = "anonymous"属性を追加するには
Alexandre Swioklo
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.