ASP.NET MVC 4 의 js css 파일 통합 기능(3)

MVC 4 는 새로운 기능 을 추 가 했 습 니 다.그 다음 에 MVC 4 의 새로운 기능 을 연구 해 보 겠 습 니 다.우 리 는 MVC 4 프로젝트 를 새로 만 들 때 프로젝트 아래 에 앱 이 하나 더 생 긴 것 을 발견 할 수 있 습 니 다.Start 폴 더,폴 더 아래 에 4 개의 파일 이 있 습 니 다.BundleConfig.cs,FilterConfig.cs,RouteConfig.cs,WebApiConfig.cs,그 중에서 BundleConfig.cs 파일 은 우리 가 이 절 에서 말 하고 자 하 는 파일 입 니 다.
브 라 우 저가 서버 에 요청 을 보 낼 때 요청 한 파일 연결 수량 이 제한 되 어 있 는 것 은 잘 알려 져 있다.BundleConfig 를 사용 하면 여러 개의 파일 을 요청 하고 하나의 요청 으로 만 들 수 있 습 니 다.파일 의 주석,공백,압축 파일 의 크기 를 제거 하고 압축 최적화 코드 를 자동 으로 합 쳐 응답 시간 을 단축 시 키 고 웹 페이지 속 도 를 향상 시 켜 웹 사 이 트 를 최적화 하 는 역할 을 합 니 다.
1.그룹 정의
MVC 4 프로젝트 를 만 들 면 global.aax 파일 에 있 는 ApplicationStart()방법 에서 다음 코드 를 보면 등록 역할 을 합 니 다.
BundleConfig.RegisterBundles(BundleTable.Bundles);
BundleConfig.cs 코드:


public class BundleConfig 
 { 
  //    Bundling      ，    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*")); 
 
   //    Modernizr               。  ，     
   //      ，    http://modernizr.com                。 
   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")); 
  } 
 }

BundleCollection 은 집합 으로 바 인 딩 규칙 을 집합 에 추가 하고 Add 방법 을 사용 합 니 다.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
new ScriptBundle("~/bundles/jquery")은 그룹 이름 을 정의 합 니 다.Include 는 이 그룹 에 포 함 된 파일 을 표시 합 니 다.
version 매개 변 수 는 버 전 번 호 를 대표 합 니 다.*모든 것 을 대표 합 니 다.이 두 가 지 는 마스크 로 이해 할 수 있 습 니 다.
이 코드 는~/bundles/jquery 그룹 을 만 드 는 것 을 표시 합 니 다.이 그룹 이 가리 키 는 파일 은 scripts 폴 더 의 jquery-1.7.1.js 파일 입 니 다.
scripts 폴 더 에 jquery-1.7.1.js,jquery-1.6.1.js 가 있 으 면 이 두 파일 을 가리 킬 것 입 니 다.
마찬가지 로 bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css");~/content/css 그룹 을 만 들 었 음 을 표시 합 니 다.~/content/site.css 파일 을 가리 키 고 있 습 니 다.
2.그룹 사용
그룹 이 정의 되 었 습 니 다.어떻게 사용 하 는 지 보 여 드 리 겠 습 니 다.
페이지 에 scripts 를 사용 하면@Scripts.Render("~/bundles/jquery")방법 을 사용 할 수 있 습 니 다.매개 변 수 는 그룹 이름 입 니 다.
페이지 에 css 를 사용 하면@Styles.Render("~/content/css")방법 을 사용 할 수 있 습 니 다.매개 변 수 는 그룹 이름 입 니 다.
VIEWS 폴 더 의 Shard 폴 더 를 볼 수 있 는Layout.cshtml 파일


<!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>

프로젝트 를 실행 한 후 페이지 소스 코드 를 볼 수 있 습 니 다.효 과 는 다음 과 같 습 니 다.

3.합병 요청
다음 에 우 리 는 그룹 을 나 누 어 여러 파일 을 요청 하나 로 합 쳐 다음 과 같은 두 가지 방법 으로 실현 할 수 있 습 니 다.
1).웹.config 의 컴 파일 디 버 깅 debug 를 false로 설정 합 니 다.
2).BundleConfig 의 방법 끝 에 BundleTable.EnableOptimizations=true 를 추가 합 니 다.
페이지 를 다시 실행 하면 다음 코드 생 성 을 볼 수 있 습 니 다.
src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"
?앞 에는 그룹 이름 이 있 고,뒤 에는 여러 파일 이 합 쳐 져 생 성 된 해시 코드 입 니 다.

4.대비 효과
우 리 는 불 여우 아래 서 firebug 로 합병 전후의 대비 효 과 를 볼 수 있 습 니 다.요청 한 파일 의 크기,시간 등의 차 이 를 비교 할 수 있 습 니 다.
압축 병합 전:

압축 병합 후:

주:기본적으로 BundleTable.Bundles 는 접미사 이름 이 이 파일 인 intellisense.js,-vsdoc.js,.debug.js,.min.js,.min.css 를 걸 러 냅 니 다.
접미사 이름 이 이 파일 들 을 불 러 오 면 공백 이 표 시 됩 니 다.
이 파일 에 대한 필터 제한 을 다음 과 같은 방법 으로 제거 할 수 있 습 니 다.


BundleTable.Bundles.IgnoreList.Clear(); 
BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always); 
//BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always); 
//BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);

우 리 는 그룹 을 통 해 여러 파일 을 요청 하나 로 합 쳐 파일 의 크기 를 압축 하고 압축 최적화 코드 를 자동 으로 합 쳐 응답 시간 을 단축 시 키 고 웹 페이지 속 도 를 높 입 니 다.본 고 를 통 해 여러분 들 이 사 이 트 를 더욱 잘 최적화 하 는 데 도움 이 되 기 를 바 랍 니 다.

ASP.NET MVC 4 의 js css 파일 통합 기능(3)

좋은 웹페이지 즐겨찾기