Programming/.NET

번들(Bundle)은 웹페이지안에 포함된 css나 javascript와 같은 파일들을 정리하고 최적화시킬 수 있도록 합니다. 우선 아래 뷰를 한번 보겠습니다.

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
    <div> 
    </div>
</body>
</html>

 

이 뷰는 사실상 아무것도 표시하지 않지만 총 4개의 css와 javascript파일을 포함하고 있습니다. 이 파일을 번들을 통해 정리하고 최적화를 수행하려면 우선 해당 파일들(css, js)이 번들을 통해 추가되도록 수정되어야 합니다.

 

첫번째로 NuGet에서 Microsoft.AspNet.Web.Optimization 패키지를 추가하고 App_Start 폴더에 BundleConfig.cs 라는 파일을 아래 내용으로 생성하도록 합니다.

 

namespace WebApplication1
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/*.css"));
            bundles.Add(new ScriptBundle("~/Content/script").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/bootstrap.js"));
        }
    }
}

 

BundleConfig.cs에서는 namespace를 최상위 경로로 지정해야 하고 RegisterBundles 메서드안에서는 css와 script 2가지의 번들을 생성해야 하는데 각각 StyleBundle과 ScriptBundle을 이용해 생성한 인스턴스를 전달해야 합니다. 인스턴스를 생성할때는 번들에 포함된 파일의 컨텐츠를 요청할 경로를 알려주어야 하는데 이때는 존재하지 않는 임의의 경로를 표시하고 뒤이어 Include 메서드를 통해 각각의 번들에 포함시킬 파일을 지정합니다.

 

특히 Include에서는 css파일을 지정할때 * 문자를 사용해 해당 경로에 있는 모든 css파일이 포함되도록 하였으며 Jquery는 {version}을 통해 포함된 버전의 파일과 일치되는 js파일을 가져오도록 하였습니다.

 

그리고 Global.asax 에서 웹프로그램이 시작될때 BundleConfig에 있는 RegisterBundles 메서드가 호출될 수 있도록 내용을 추가합니다.

 

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    RouteConfig.RegisterRoutes(RouteTable.Routes);

    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

 

마지막으로 View 폴더안에 Web.config를 수정하여 System.Web.Optimization 네임스페이스를 추가하면 준비가 완료됩니다.

 

<pages pageBaseType="System.Web.Mvc.WebViewPage">
  <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    <add namespace="System.Web.Optimization" />
    <add namespace="WebApplication1" />
  </namespaces>
</pages>

 

이제 뷰에서 기존의 파일을 포함시킨 태그를 제거하고 아래와 같이 @Scripts와 @Styles 헬퍼메서드를 사용해 렌더하도록 하면 이전과 동일하게 파일이 포함되는 것을 확인할 수 있습니다.

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/Content/script")
</head>
<body>
    <div> 
    </div>
</body>
</html>

 

이것은 단지 헬퍼메서드를 통해 기존의 하나하나 추가했던 파일들을 한꺼번에 추가할 수 있다는 것에서 그치지 않고 상황에 따라 최적화된 파일들을 자동적으로 포함시켜주는 것이 가능합니다.

 

<system.web>
  <compilation debug="false" targetFramework="4.5.2" />
  <httpRuntime targetFramework="4.5.2" />
</system.web>

 

최상위에 있는 Web.config 설정에서 debug를 false로 설정하고 Ctrl + F5 키를 눌러 디버깅없이 프로그램을 실행하면 이전과는 사뭇 다른 형태로 파일들을 포함시킨다는 것을 알 수 있습니다.

 

<link href="/Content/css?v=gNG_bQJEaazfHnGAjaeU8yu68JJWugHUs94HKNPHNzo1" rel="stylesheet"/>

<script src="/Content/script?v=rDiPocDqq4l1v5wzpbjulXqJqaXM1N6IzVYG_owHFO81"></script>

 

즉 css와 js파일들을 축소하여 용량을 줄이고 단일 형태로 포함시키도록 함으로서 브라우저가 서버에 요청하는 횟수도 감소시키고 있습니다.

'Programming > .NET' 카테고리의 다른 글

[ASP.NET MVC] 프로젝트 폴더 구성  (0) 2018.02.09
[C#] EventWaitHandle  (0) 2018.01.16
[ASP.NET MVC] 번들(Bundle)  (0) 2018.01.02
[C#] nameof  (0) 2017.12.27
[ASP.NET MVC] AJAX  (0) 2017.12.22
[C#] Assembly  (0) 2017.12.13
0 0