Зачем использовать @ Scripts.Render («~ / bundles / jquery»)

217

Как

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

отличается от простой ссылки на скрипт из HTML, как это

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

Есть ли прирост производительности?

Том Сквайрс
источник
Как мне добавить type = «text / 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" />заключается в том, что @Scripts.Render()будет web.configучитываться параметр отладки:

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

Если debug="true"тогда, то вместо этого он будет отображать отдельные теги сценариев для каждого исходного сценария без минимизации.

Для таблиц стилей вы должны будете использовать StyleBundle и @ Styles.Render ().

Вместо загрузки каждого сценария или стиля одним запросом (с тегами сценария или ссылки) все файлы сжимаются в один файл JavaScript или таблицы стилей и загружаются вместе.

yan.kun
источник
9
Просто интересно: где-то хранится файл для этого пакета или он просто существует в памяти?
Эллиот
15
Он хранится в кеше.
NicoJuicy
4
Также можно настроить автоматическое использование CDN и переход к локальным сценариям, если CDN недоступен. Это довольно гладко.
Дэн Эспарза
39
Есть дополнительная выгода для этого. При отладке Scripts.Render будет выводить каждый файл без разделения, что делает локальную разработку гораздо менее болезненной, но в реальной среде это выведет объединенный / минимизированный результат, который может привести к повышению производительности, как описано выше, но без изменение любого кода.
Сеткран
9
В «базовом» шаблоне MVC4 (Visual Studio) пакеты готовятся в «BundleConfig.cs» (папка App_Start).
Аполо
51

Вы также можете использовать:

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

Чтобы указать формат вывода в сценарии, где вам нужно использовать Charset, Type и т. Д.

Termato
источник
3
Также очень полезно для загрузки модулей requirejs
Phil
13
... или добавить asyncатрибут.
Кристоф Финк
7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
Роберт Макки,
1
... или добавить атрибут crossorigin = "anonymous"
Александр Свиокло