2016-09-13 3 views
0

JavaScript 의존성이 많은 MVC 페이지가 있는데,이를 depend-A로, -B는 depend-A에 의존하는 depend-B라고 부르 자고합니다. 이들은 모두 페이지에 포함 된 MVC의 다른 번들에 포함되어 있습니다. Google의 페이지 스피드 도구를 통해이를 실행 한 후 렌더링 블로킹을 방지하기 위해 JS를 비동기 적으로 포함해야한다고 제안했습니다.JS 파일의 MVC 번들과 비동기 로딩을 결합하는 방법

종속성 때문에 특정 순서로로드해야하므로 LABJS를 사용하여 비동기 적으로 올바른 순서로로드하여 렌더링 블로킹을 방지합니다.

이것은 번들의 URL을 포함하는 방식으로 작동하지만 개발하는 동안 JS 파일의 디버그 버전을 로컬로 가질 수있는 능력을 상실합니다.

누구나 JS 파일을 비동기 적으로로드 할 수 있지만 순서대로 디버그 버전을 로컬에서 유지할 수있는 방법을 제안 할 수 있습니까?

다음은 현재 사용중인 것입니다.

<script src="~/Scripts/LAB.min.js"></script> 
<script> 
    $LAB 
    .script("@Scripts.Url("~/bundles/jquery")").wait() 
    .script("/scripts/fileone.js").wait() 
    .script("/scripts/filetwo.js").wait(function() { 
     FunctionInFileTwo(); 
    }); 
</script> 

위의 코드가있는 페이지 소스는 다음과 같습니다.

<script src="/Scripts/LAB.min.js"></script> 
<script> 
    $LAB 
    .script("/bundles/jquery?v=GnU3whLS74nHNYUsUJjcWJKdXvKBNbFqBrkQVKSNlKc1").wait() 
    .script("/scripts/scripts/fileone.js").wait() 
    .script("/scripts/scripts/filetwo.js").wait(function() { 
     FunctionInFileTwo(); 
    }); 
</script> 

답변

0

깨끗한 API가없는 것 같습니다.

Scripts.Render("~/bundles/yourbundle")은 필요한 스크립트 태그 중 IHtmlString을 반환합니다. 스크립트 srcs를 해당 문자열에서 제거하고 올바른 $LAB 호출을 생성하는 메소드를 만들 수 있습니다.

Scripts.Manager.RenderExplicit(tagFormat, paths)이 가까워지면 더 나은 형식 문자열을 첫 번째 인수로 전달하지만 목록의 중간에 형식이 다른 스크립트 태그를 그대로 포함하는 코드를 읽는 것이 좋습니다.