2013-03-14 1 views
34

jquery를로드하는 데 CDN을 사용하려고합니다. 나는 this 기사를 읽었으며 이것은 매우 직설적이어야합니다.MVC 스크립트 번들에서 CDN 사용. 내가 뭘 놓치고 있니?

내 스크립트 번들은 다음과 같이 정의됩니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    @RenderBody() 

    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body> 
</html> 

을하지만 불을 지르고 볼 때 JQuery와 로컬 호스트에서로드되는 것 같습니다 :

bundles.UseCdn = true; 
bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js").Include(
         "~/Scripts/jquery-{version}.js")); 

다음과 같이 나는 페이지를 포함하고있다. firebug inspection

저는 realease와 debug builds /를 모두 시도했습니다. 내가 무엇이 누락 되었습니까? 나는 이것이 아주 간단해야한다고 생각한다. 감사.

+1

체크 아웃이 관련 매우 흥미로운 게시물에 http를 : //www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification – Jaider

답변

42

debug="false" 모드에서 응용 프로그램을 실행하거나 최신 버전을 사용하는 경우 BundleTable.EnableOptimizations = true;

+3

FWIW : 얼마나 많은 사람들이이 속성을 알고 있는지 잘 모르겠습니다 ... 이 시나리오에서 (Debugger.IsAttached)를 사용하여 "디버그"스크립트를로드하고 "else"에서 web.config에 의존하지 않고 수동으로 BundleTable.EnableOptimizations = true를 트리거합니다. IIS와 Asp.net Development Host를 사용하는 환경에서 작업하는 경우 스크립트를 디버깅해야하는 경우 최악의 경우 돌아가서 IDE를 실행 한 다음 페이지를 새로 고쳐야합니다. 다시 일반 텍스트 자세한 스크립트. 희망이 사람을 도움이됩니다. –

+0

죄송합니다, 언급하는 것을 잊었습니다.이것은 또한 최적화를 설정하거나 배포 할 때 올바른 방법으로 컴파일하는 것을 잊지 않습니다. 이것은 일반적으로 프로덕션에서는 문제가되지 않지만 테스트 팀을 보장하려는 QA 사이트 등에서 문제가 될 수 있습니다. 축소 된 버전으로 작업하여 안정성을 보장합니다. –

+1

'BundleTable.EnableOptimizations = true;'항상 minification을 ** ** – Liam

7

디버그 모드가 아닌지 확인하십시오.

bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js") 

설정 BundleTable.EnableOptimizations = true; // 디버그 모드를 사용하려면

릴리스 모드와 jQuery를의 디버그 버전에서 디버그 모드에서 로컬로 가져올 수 반면 jQuery를가 CDN에서 요청됩니다. CDN을 사용하는 경우 CDN 요청이 실패 할 경우 대체 메커니즘이 있어야합니다.

CDN 요청 후 실패 할 경우

<script type="text/javascript"> 
      if (typeof jQuery == 'undefined') { 
       var e = document.createElement('script'); 
       e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")'; 
       e.type = 'text/javascript'; 
       document.getElementsByTagName("head")[0].appendChild(e); 

      } 
     </script> 
+0

@downvoter 의견을 남겨주세요. 나는 대답을 편집했다. –

+2

CDN 폴백 (fallback)이 일반적으로 불충분 한 머리말에 스크립트 참조를 배치하기 때문에 그들은 downvoted했을 수 있습니다. –

+1

JS 코드를 작성하는 대신 다음과 같이 BundleConfig 클래스에서 CDN 대체 표현식을 지정할 수 있습니다. jquery.CdnFallbackExpression = "window.jQuery"; –

13

은 실제로 당신이 짧은 자신의 방법을 @RaviGadag 쓸 수있는 사용 콜백을 제공 할 수 있습니다 ASP.NET MVC. 이 방법을 사용하면 레이아웃의 대체를 직접 작성할 필요가 없습니다 :

public static void RegisterBundles(BundleCollection bundles) 
{ 

    bundles.UseCdn = true; 

    var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"; 
    var jqueryBundle = new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-{version}.min.js"); 
    jqueryBundle.CdnFallbackExpression = "window.jQuery"; 
    bundles.Add(jqueryBundle); 

    // ... 

    BundleTable.EnableOptimizations = true; 
} 
콘텐츠 전송 네트워크에서

사용할 수 JQuery와 버전 (CDN) : http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0

+2

"window.jquery"가 아니라 "window.jQuery"여야합니다. JavaScript는 대소 문자를 구분합니다. – arni

+0

@arni, 코드에서 변경했습니다. – juFo

관련 문제