Зачем использовать @ 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 или таблицы стилей и загружаются вместе.


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 и т. Д.


3
Также очень полезно для загрузки модулей requirejs
— Phil

13
... или добавить asyncатрибут.
— Кристоф Финк

7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
— Роберт Макки,

1
... или добавить атрибут crossorigin = "anonymous"
— Александр Свиокло
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.