@ Scripts.Render (“~ / bundles / jquery”)를 사용해야하는 이유


답변:


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
궁금한 점은 : 해당 번들의 어딘가에 파일이 저장되어 있거나 메모리에 존재하는 것입니까?
Elliot

15
캐시에 저장됩니다.
NicoJuicy

4
CDN을 자동으로 사용하고 CDN을 사용할 수없는 경우 로컬 스크립트로 대체하도록 설정할 수도 있습니다. 꽤 매끄 럽습니다.
Dan Esparza

39
이 작업을 수행하면 추가 이점이 있습니다. 디버깅 할 때 Scripts.Render는 각 파일을 번들로 출력하므로 로컬 개발이 훨씬 덜 어려울 수 있지만 라이브 환경에서는 번들 / 최소화 된 결과가 출력되므로 위에서 설명한대로 성능이 향상 될 수 있습니다. 코드 변경
Sethcran

9
MVC4 (Visual Studio)의 "기본"템플릿에서 번들은 "BundleConfig.cs"(App_Start 폴더)에 준비됩니다.
Apolo

51

다음을 사용할 수도 있습니다.

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

Charset, Type 등을 사용해야하는 시나리오에서 출력 형식을 지정하려면


3
requirejs 모듈을로드 할 때도 유용
Phil

13
... 또는 async속성 을 추가 합니다.
Christoph Fink

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.