asp.net-mvc-4 - @Scripts.Render("~/bundles/jquery") を使用する理由

Question

どうやって

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

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

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

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

Answer 1

バンドリングとは、複数の JavaScript またはスタイルシート ファイルを書式設定せずに (圧縮とも呼ばれます) 1 つのファイルに圧縮して、帯域幅とページを読み込むためのリクエスト数を節約することです。

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

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")ネイティブに対するもう 1 つの利点は<script src="~/bundles/mybundle" />、デバッグ設定@Scripts.Render()を尊重することです。web.config

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

その場合debug="true"、代わりに各ソース スクリプトの個々のスクリプト タグを縮小せずにレンダリングします。

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

各スクリプトまたはスタイルを 1 回のリクエスト (script または link タグを使用) でロードする代わりに、すべてのファイルを 1 つの JavaScript またはスタイルシート ファイルに圧縮して一緒にロードします。