ASP.NET Optimization Framework 사용해 보기

ASP.NET Optimization Framework 사용해 보기

http://www.c-sharpcorner.com/UploadFile/abhijmk/Asp-Net-web-optimization-framework-in-web-form/

ASP.NET 을 web form 으로 개발하면서 이에 대한 성능 최적화에 대해 화면을 통해서 말씀드리고자 합니다. 먼저 ASP.NET 빈 웹사이트를 선택합니다.

1. .NET 4.5 환경에서 ASP.NET 빈 웹사이트를 선택하여 생성합니다.
   
   
2. 만들고 나서 툴(tools) 중 메뉴 중에, Nuget 패키지 관리자에서 package Management Console(패키지 관리 콘솔) 을 선택합니다.
   
   
3. 그러면 command 창 이 뜨면서 Install - Package Microsoft.AspNet.Web.Optimization 라는 입력을 한 다음 enter 를 칩니다. 그러면 알아서 ASP.NET Optimization Framework 이 설치 됩니다.
   
   
4. 설치 된 후, 살펴보면, 아래와 같이 bin 폴더 내부에 여러 개의 dll 파일들이 존재하는 것을 확인하실 수 있습니다.
   
   
5. 이제 Scripts 폴더와 Styles 폴더를 만들고, Test.aspx 라는 web form 페이지를 생성합니다. 여기서 MasterPage (마스터페이지) 기능은 제외 하였습니다. 이제 만든 부분을 Solution Explorer 에서 아래와 같이 만들어 진 것을 확인하실 수 있습니다.
   
   
   
   여기서 scripts 폴더에 4개의 파일이 존재하며, Styles 폴더에는 2개의 파일이 존재합니다. Scripts 폴더에는 jQuery 1.7.1 버전과 이를 사용하여 확장 제품을 제공해 주는 jQuery-ui-1.8.20.js 를 넣습니다.
6. Global.asax 을 추가합니다. 해당 파일을 열어보면, 여러가지의 event 들을 가지고 있는데, 그 중, application_Start 이벤트에 아래와 같은 코드를 기재합니다.

   System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.
   Optimization.ScriptBundle("~/bundle/js")

   .Include("~/Scripts/*.js"));

   System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.
   Optimization.ScriptBundle("~/bundle/css")

   .Include("~/Styles/*.css"));

    

   설명을 드리자면, bundle table 안에 두개의 bundles 을 직접 생성 및 추가합니다. Scripts 폴더 내부에 존재하는 모든 js 경로를 Include("~/Scripts/*.js")에 지정하면, 기존에는 특정 폴더 내부의 js 경로를 전부 페이지마다 여러 경로를 지정해 주었지만, 이를 경로와 *.js 을 명명하여, System.Web.Optimization.ScriptBundle("~/bundle/js") 라는 하나의 경로를 브라우저에 한 줄로 보여줍니다. 이와 동일하게 CSS 경로도 위 처럼 구현이 가능합니다.
   

   이는 실질적으로 자원들(resources) 를 호출하거나 loading 하는데 있어서 성능 개선을 좀 더 향상 시켜 줄 수 있다고 생각듭니다.
   

   몇몇의 강좌들을 찾아서 본적이 있는데, 거기서는 static 파일에 bundle 을 생성하기 위해서 BundleConfig 파일을 일일이 분리하여 생성한 것을 본적 있습니다. 그리고 global.asax 파일 코드에 static 메소드를 호출하여 이를 bundle 처리 하였더군요.

   이는 abstraction(추상화) 을 단계를 하나 더 제공하는 것을 의미합니다. 여기 강좌에선 간단하게 global.asax 파일 내부에 통합하여 기술한 것을 보여줍니다.

    

   이제 이를 구현한 내용은 웹폼 페이지인 .aspx 내부에 bundle을 추가해 봅시다.

   Scripts.Render 와 Styles.Render 메소드를 이용하여 global.asax 에 bundle 명을 기재한 사항에 대해 기재하여 아래와 같이 랜더링(Rendering) 합니다.
   

   <%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>

   <%: System.Web.Optimization.Styles.Render("~/bundle/css") %>

    

7. 이제 구현을 전부 하였고, 약간의 잔여 작업이 있는데, 이를 bundling 이나 minification (최소화) 가 가능하도록 하는 지정하는 부분이 있습니다. 이를 web.config 파일에서 설정이 가능하여, 이는 compliation 요소에서 debug 라는 속성에 명시합니다.
   
   <><system.web>
   <><compilation debug="false" />
   <></system.web>
8. 자~ , 이제 모든 작업이 끝났습니다. 이를 실행해 보죠.
   
   

web optimization framework 이 실제로 잘 되고 있는지 IE 브라우저에서 F12 버튼을 누릅니다.
아래 설명처럼 Script 탭에 Test.aspx 를 선택하면 요상한 "see js?v…….." 같은 글자가 보일 겁니다. 이는 bundle 이름을 랜덤으로 만들어서 보여준 것을 의미합니다.



여기서 여러 개의 js 파일이 loading 되는게 아닌, 하나의 bundle 로 loading 되는것을 확인하실 수 있습니다. "Network" 탭에서 여러 개의 자원들(resources) 이 이 호출되는 것을 볼 수 있는데요. 개발한대로, 하나의 JavaScript 파일명과 하나의 css 파일명이 호출되는 것을 볼 수 있습니다.



만약에 ie 의 개발 툴(developer tool) 에서 볼 수 없다면, ASP.NET Optimization Framework 없이 일반적인 application 으로 인식하여 제공해 줍니다. ASP.NET Optimization Framework 을 해제하고자 한다면, web.config 에 기술한 debug 의 false 를 true 로 하고 다시 페이지를 호출하여 f12 를 눌러 보면 기존처럼 여러 개의 js 파일을 보여줍니다.



그리고 JavaScript files 이 2개가 각각 loading 되어 랜더링 된 것을 보실 수 있습니다. 만약에 js 파일이 20개 라면 20 번을 aspx 페이지에서 호출하게 되겠지요.



웹 사이트에 ASP.NET web optimization framework 을 어떻게 사용하는지에 대해 간단하게 살펴봤습니다. 많은 성능을 최적화하기 위한 부분이므로 많이 사용해 보시길 바랍니다.

 

감사합니다.