Asp.Net MVC 4 Bundle 묶음 압축 기술 에 대한 소개

반 갑 습 니 다.최근 프로젝트 에 Asp.Net MVC 4+Entity Framework 5 를 사 용 했 는데 뮤 직 비디오 c 4 가 Bundle,Web API 등 기술 을 추가 한 것 을 발견 하여 저 를 흥분 시 켰 습 니 다.예전 에는 제3자 로 했 는데 여기 서 주로 Bundle 기술 을 말 했 습 니 다.
많은 큰 사이트 들 이 Bundle 기술 로 많은 자원 낭비 와 성능 의 희생 을 초래 하지 않 았 습 니 다.무시 하지 마 세 요.사용 하면 그의 장점 을 발견 할 수 있 습 니 다.
여러 요청 을 하나의 요청 으로 묶 어 서버 요청 수 를 줄 입 니 다.
 Bundle 기술 을 사용 하지 않 았 습 니 다.debug 에서 보 이 는 것 은 실제 요청 수 와 경로 입 니 다.
 
Bundle 기술 을 사용 하고 캐 시 기능 디 버 깅 을 Release 모드 로 설정 하고 F5 를 누 르 거나 웹 config 를 수정 하면 통합 과 압축 효 과 를 볼 수 있 습 니 다.



javascript,css 등 자원 파일 을 압축 하여 네트워크 대역 폭 을 줄 이 고 성능 을 향상 시 킵 니 다.


배경 설정
MVC 4 는 구조 적 으로 변동 이 있어 서 원래 의 Global.aax 를 간소화 하고 정적 인 설정 파일 을 App 에 추가 했다.Start 아래,BundleConfig.cs 를 유의 하 세 요.말 그대로 Bundle 의 설정 입 니 다.모든 설정 을 여기에서 진행 하면 됩 니 다.물론 별도의 설정 파일 도 가능 합 니 다

 public class BundleConfig { // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); } } 

여기 서 여러분 은 모듈 화 에 따라 설정 할 수 있 습 니 다.우리 가 본 아래 의 Url 은 위의 bundles.Add(...)에 추 가 된 js,css 의 virtual Path 입 니 다.
주의해 야 할 것 은 서로 다른 virtualPath 에 추 가 된 같은 자원 파일 입 니 다.중복 불 러 옵 니 다!

프론트 데스크 호출
 공공 자원 파일 에 대해 우 리 는 보통Layout.cshtml(webform 의 모판 페이지)파일 중 스 크 립 트 파일 참조:@Scripts.Render(virtualPath[,virtualPath 1][,virtualPath 2][,...]) CSS 파일 참조:  @Styles.Render(virtualPath[,virtualPath1][,virtualPath2][,...])

 
@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css") 
...
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @RenderSection("scripts", required: false) 

정규 일치 필요 한 필터 필요 하지 않 은

 bundles.IgnoreList.Clear(); bundles.IgnoreList.Ignore("*.debug.js"); bundles.IgnoreList.Ignore("*.min.js"); bundles.IgnoreList.Ignore("*-vsdoc.js"); bundles.IgnoreList.Ignore("*intellisense.js"); bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js")); //  jquery   　　 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", //        jquery.unobtrusive "~/Scripts/jquery.validate*")); ... 

CDN 사용 하기

 bundles.UseCdn = true; //  CDN string jqueryCdn = "http:deom.jb51.net/jslib/jquery/jquery-1.7.1.min.js"; bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js")); 

cdn 서버 가 끊 기거 나 접근 할 수 없 을 때 이곳 은 로 컬 자원 파일 을 선택 합 니 다.debug 에서 뮤 직 비디오 를 보면 원래 의 가면 을 볼 수 있 습 니 다.이것 은 우리 가 디 버 깅 하 는 데 매우 좋 습 니 다.