Dlaczego warto korzystać z @ Scripts.Render („~ / bundles / jquery”)

217

Jak

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

różnią się od zwykłego odwoływania się do skryptu z html w ten sposób

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

Czy są jakieś wzrosty wydajności?

Tom Squires
źródło
Jak dodać type = „text / css” - stackoverflow.com/questions/15662096/…
LCJ

Odpowiedzi:

288

W pakiecie chodzi o kompresowanie kilku plików JavaScript lub arkuszy stylów bez żadnego formatowania (zwanego również „minified”) w jednym pliku w celu zapisania pasma i liczby żądań załadowania strony.

Jako przykład możesz stworzyć swój własny pakiet:

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

I renderuj tak:

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

Kolejną zaletą @Scripts.Render("~/bundles/mybundle")nad rodzimym <script src="~/bundles/mybundle" />jest to, że @Scripts.Render()uszanuje web.configustawienie debugowania:

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

Jeśli debug="true"tak, to zamiast tego renderuje pojedyncze znaczniki skryptu dla każdego skryptu źródłowego, bez żadnych minimalizacji.

W przypadku arkuszy stylów będziesz musiał użyć StyleBundle i @ Styles.Render ().

Zamiast ładowania każdego skryptu lub stylu za pomocą jednego żądania (ze znacznikami skryptu lub łącza) wszystkie pliki są kompresowane do jednego pliku JavaScript lub arkusza stylów i ładowane razem.

yan.kun
źródło
9
Zastanawiam się: czy gdzieś dla tego pakietu jest jakiś plik, czy istnieje on w pamięci?
Elliot
15
Jest przechowywany w pamięci podręcznej.
NicoJuicy,
4
Można również ustawić automatyczne korzystanie z CDN i powrót do lokalnych skryptów, jeśli CDN jest niedostępny. To całkiem sprytne.
Dan Esparza
39
Jest to dodatkowa korzyść z tego. Podczas debugowania Scripts.Render wypisuje każdy plik rozpakowany, co sprawia, że ​​rozwój lokalny jest znacznie mniej uciążliwy, ale w środowisku na żywo spowoduje to wygenerowanie spakowanego / zminimalizowanego wyniku, co może prowadzić do wzrostu wydajności, jak opisano powyżej, ale bez zmiana dowolnego kodu.
Sethcran
9
W „podstawowym” szablonie MVC4 (Visual Studio) pakiety są przygotowywane w „BundleConfig.cs” (folder App_Start).
Apolo,
51

Możesz także użyć:

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

Aby określić format wyniku w scenariuszu, w którym należy użyć zestawu znaków, typu itp.

Termato
źródło
3
Również bardzo przydatne do ładowania modułów wymagań
Phil
13
... lub dodać asyncatrybut.
Christoph Fink,
7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
Robert McKee
1
... lub dodać atrybut crossorigin = "anonimowy"
Alexandre Swioklo