[ASP.NET] js/css을 min 파일로 만들어보자.

 

개발자라면 .min 이라는 확장자를 많이 봤을 것이다.

웹 개발자라면 자주 사용하는 jquery만 봐도 min 파일을 제공해준다. 일단 jquery를 이용해서 min 파일이 무엇인지와 min의 효과를 알아보자.

 

jquery min 파일

https://code.jquery.com/jquery-3.4.1.js

https://code.jquery.com/jquery-3.4.1.min.js

 

두 가지 파일을 열어보면, 확연하게 어떠한 것이 차이 나는지 알 수 있다.

좌: 기본 파일, 우: min 파일

왼쪽 기본 jquery 파일은 보기 쉽게 정렬되어 있다는 것을 느낄 수 있다. 하지만 오른쪽 min 파일은 공백을 최소화한거 뿐만 아니라, 변수의 네이밍도 달라져 있다는 것을 알 수 있다.

 

 

 

좌: 기본 파일, 우: min 파일

 

이것은 브라우저가 해당 파일을 읽는 속도인데, 확연하게 기본 파일과 min파일이 차이가 나는 것을 알 수 있었다.

서론이 길었다. ASP.NET 에서도 해당 기능을 제공해주어서, js/css 파일을 min 파일로 만들 수가 있다.

차근차근 따라해보자.

 

 

ASP.NET BuldleConfig를 이용해서, min 파일 만들기.

 

최상위 폴더 App_Start 폴더에, BundleConfig.cs라는 파일이 보일 것이다. 없으면 만들어 준다.

 

Visual Studio 2017, .Net Framework 4.5 에서는 없었는데
Visual Studio 2019, .Net Framework 4.72 에서는 자동으로 생성되어 있다. 개발 환경에 유념하자.

 

public static void RegisterBundles(BundleCollection bundles) {
}

 

RegisterBundles이라는 정적 메서드를 만들어 준다.

메서드 안에 이제 min으로 묶어줄 파일을 아래 방법을 이용하여, script는 script로 css는 css로 묶어준다.

 

 

Script

// new ScriptBundle(실제 html 페이지에서 참조할 절대경로 url을 만들어 준다.)
bundles.Add(new ScriptBundle("~/js/master/default").Include(
    "~/jquery/ui/jquery-ui.min.js",                 // min 파일을 만들어 줄 js 파일을 나열한다.
    "~/js/kakao.min.js",
    "~/jquery/jquery.ui.datepicker-ko.min.js",
    "~/js/search.htm"));

 

CSS

bundles.Add(new StyleBundle("~/css/master/headerfooter").Include(
    "~/css/common.css",
    "~/css/main_head.css"));

 

 

장/단점

장점

• 관련된 여러 파일을 하나의 파일로 만들 수 있다.
• min 파일로 생성하여, 용량을 줄여서 브라우저에서 다운로드 받는 속도를 더 빠르게 할 수 있다.

단점

• 배포 시, dll 파일을 함께 올려야 하는 번거로움이 존재한다.
• script/css Include 해줄 때, 여러 파일들의 종속성이 존재하므로 꼭 유념해야 한다.

 

사용자를 위해서는 bundle을 이용해서, min 파일을 생성하는 것이 좋은 방법이다. 하지만 간단한 수정에도 dll까지 올려야 하는 부담감은 개발자/퍼블리셔 몫이다. 이것에 대한 부담감은 어느 정도 감수하더라도, bundle을 이용해서 웹사이트의 속도를 높여서 사용자에게 편리함을 주어야 하는 게 정답인 거 같다.