asp.net-mvc
번들링 및 미세화

축소

축소는 다운로드 시간을 단축하기 위해 CSS 및 Javascript 파일의 크기를 줄이는 데 사용됩니다. 이 프로세스는 파일에서 불필요한 공백, 주석 및 기타 중요하지 않은 모든 내용을 제거하여 수행됩니다.

이 프로세스는 ScriptBundle 또는 StyleBundle 객체를 사용할 때 자동으로 수행됩니다. 이를 비활성화해야하는 경우 기본 Bundle 객체를 사용해야합니다.

Minification 사용 예제

다음 코드는 전 처리기 지시문을 사용하여 릴리스 중에 만 번들을 적용하여 비 릴리스 중에보다 쉽게 ​​디버깅 할 수 있도록합니다 (번들되지 않은 파일은 일반적으로 탐색하기가 더 쉽습니다).

public static void RegisterBundles(BundleCollection bundles)  
{  
    #if DEBUG
        bundles.Add(new Bundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new Bundle("~/Content/css").Include("~/Content/site.css"));  
    #else
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));  
    #endif
}

스크립트 및 스타일 번들

다음은 BundleConfig.cs 파일의 기본 코드 조각입니다.

using System.Web.Optimization;

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"));  
                    
    // 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",  
    }  
 } 

번들은 Application_Start () 메소드 내부의 Global.asax 파일에 등록됩니다.

using System.Web.Optimization;

protected void Application_Start() 
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

번들은 뷰에서 렌더링되어야합니다.

@using System.Web.Optimization

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/themes/base/css") 

개발 모드에서 Web.config 파일의 compilation 요소가 debug = "true"로 설정된 경우 번들링이 발생하지 않습니다. 대신 뷰의 Render 문은 번들되지 않은 비 - 축소 형식으로 각 개별 파일을 포함하므로 쉽게 디버깅 할 수 있습니다.

응용 프로그램이 프로덕션 모드에 있으면 (Web.config 파일의 compilation 요소가 debug = "false"로 설정된 경우) 번들링이 수행됩니다.

이것은 트위터 부트 스트랩의 아이콘 파일에 대한 참조와 같은 다른 파일의 상대 경로를 참조하는 스크립트에 대한 복잡성으로 이어질 수 있습니다. 이 문제는 System.Web.Optimization의 CssRewriteUrlTransform 클래스를 사용하여 해결할 수 있습니다.

 bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

CssRewriteUrlTransform 클래스는 번들 파일 내의 상대 URL을 절대 경로로 다시 작성하여 호출 참조가 번들의 위치로 이동 한 후 참조가 그대로 유지되도록합니다 (예 : 위 코드를 사용하여 ~ / Content / css / bootstrap.css "를"~ / bundles / css / bootstrap.css "로 변경).