Asp.net MVC 에서 Bundle 을 사용 하여 js 와 css 파일 을 통합 하고 압축 합 니 다.

머리말
본 논문 의 정식 내용 을 소개 하기 전에 의 한 단락 을 인용 하여 웹 전단 에 대해 조금 상식 이 있 는 사람 은 브 라 우 저 는 다음 단계 에 페이지 에 사용 되 는 CSS,JS(JavaScript),이미지 등 스타일,스 크 립 트 와 자원 파일 을 불 러 올 것 이라는 것 을 알 아야 한다.그러나 상대 적 으로 적은 사람들 이 당신 의 브 라 우 저가 같은 도 메 인 이름 에서 동시에 불 러 오 는 자원 의 수량 이 제한 되 어 있다 는 것 을 알 게 될 것 입 니 다.예 를 들 어 IE 6 과 IE 7 은 두 개 이 고 IE 8 은 6 개 이 며 chrome 은 각 버 전이 다 르 고 보통 4~6 개 입 니 다.Bundle 은 ASP.NET 4.5 의 새로운 기능 으로 js 와 css 를 압축 할 수 있 습 니 다.다음은 할 말 이 많 지 않 으 니 상세 한 소 개 를 좀 봅 시다.
하나의 예
새 asp.net mvc 프로젝트,AppStart 폴 더 에서 BundleConfig.cs 라 는 종 류 를 볼 수 있 습 니 다.

이러한 내용 은 다음 과 같다.

public class BundleConfig
 {
 // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
 public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  "~/Scripts/jquery-{version}.js"));

 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
  "~/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 ScriptBundle("~/bundles/bootstrap").Include(
  "~/Scripts/bootstrap.js",
  "~/Scripts/respond.js"));

 bundles.Add(new StyleBundle("~/Content/css").Include(
  "~/Content/bootstrap.css",
  "~/Content/site.css"));
 }
 }

위 코드 에서 보 듯 이 압축 과 합병 은 두 가지 대상 ScriptBundle 과 StyleBundle 로 나 뉜 다.

namespace System.Web.Optimization
{
 //
 // Summary:
 // Represents a bundle that does Js Minification.
 public class ScriptBundle : Bundle
 {
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes a virtual path for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 public ScriptBundle(string virtualPath);
 //
 // Summary:
 // Initializes a new instance of the System.Web.Optimization.ScriptBundle class
 // that takes virtual path and cdnPath for the bundle.
 //
 // Parameters:
 // virtualPath:
 // The virtual path for the bundle.
 //
 // cdnPath:
 // The path of a Content Delivery Network (CDN).
 public ScriptBundle(string virtualPath, string cdnPath);
 }
}

ScriptBundle 에는 두 개의 구조 함수 가 있 습 니 다.virtualPath:js 파일 의 가상 경로,cdnPath:js 의 네트워크 cdn 경로 가 있 습 니 다.StyleBundle 의 구조 함수 인 자 는 ScriptBundle 과 같 습 니 다.
위의 코드 세 션 에서 볼 수 있 습 니 다.

jquery-{version}.js:그 중에서 version 은 jquery 의 버 전 번호 이 고 version 은 버 전 번호 의 자리 표시 자 입 니 다

jquery.validate*:*마스크,모든 것 과 일치 합 니 다

위의 코드 가 완성 되면 Global.asax 의 applicationstart 이벤트 에 등록 합 니 다.

어떻게 사용 합 니까?
보기에 서 아래 코드 를 통 해 정적 파일 에 대한 인용 을 실현 합 니 다.

훑어보다

왜 소 용이 없 지?Bundle 은 기본적으로 디 버 깅 상황 에서 포장 압축 을 열지 않 았 으 며 아래 2 중 방식 으로 열 수 있 습 니 다.

다시 한 번 훑어보다

Jquery-1.10.2.js 이 파일 은 요청 에 존재 하지 않 습 니 다.jquery 에 압축 되 어 있 습 니까?v=버 전 번호,이 파일 안에 있 습 니 다.
웹.config 파일 에서 패키지 압축 을 여 는 또 다른 방법:

총결산
위 는 Bundle 의 용법 에 대한 소개 입 니 다.정적 파일 압축 은 요청 횟수,자원 로드 속 도 를 줄 일 수 있 습 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.