[ASP.NET] 빌드시점에 정적 콘텐츠 압축하기 - AjaxMin 사용

서론

웹 사이트 개발을 하다보면 정적 콘텐츠들이 많이 생기게 된다.

웹 사이트의 특성상 많은 정적 콘텐츠들을 요청하게 되면 그만큼 속도가 느려지게 된다.

해당 글은 AjaxMin을 활용하여 정적 콘텐츠들을 경량화시켜 웹 사이트의 속도를 향상시킬 수 있는 방법을 설명하였다.

참고 : AjaxMin은 경량화가 목적이지 머지(병합)의 목적이 아니다. 

        닷넷프레임워크는 기본적으로 번들이라는 기능을 제공하여 설정에 따라 머지가 자동적으로 이루어 진다.

내용

1. NuGet Package Manager를 통해 AjaxMin을 설치한다.

   Install-Package AjaxMin

2. 프로젝트를 언로드한다.

3. 프로젝트명.csproj를 열어서 아래와 같이 수정한다.

   <Project> 영역의 마지막에 AfterBuild 코드를 추가한다.

  <UsingTask TaskName="AjaxMin" AssemblyFile="$(SolutionDir)packages\AjaxMin.5.14.5506.26202\tools\net40\AjaxMinTask.dll" />
  <Target Name="AfterBuild">
    <PropertyGroup>
      <DestinationPath>$(ProjectDir)publish</DestinationPath>
    </PropertyGroup>
    <ItemGroup>
      <JS Include="**\*.js" Exclude="publish\**\*.js;obj\**\*.js" />
      <CSS Include="**\*.css" Exclude="publish\**\*.css;obj\**\*.css" />
    </ItemGroup>
    <Copy SourceFiles="@(JS)" DestinationFiles="@(JS -> '$(DestinationPath)\%(RecursiveDir)%(Filename)%(Extension)')" Condition="'%(Extension)'=='.js'">
      <Output ItemName="JavaScriptFiles" TaskParameter="DestinationFiles" />
    </Copy>
    <Copy SourceFiles="@(CSS)" DestinationFiles="@(CSS -> '$(DestinationPath)\%(RecursiveDir)%(Filename)%(Extension)')" Condition="'%(Extension)'=='.css'">
      <Output ItemName="CssFiles" TaskParameter="DestinationFiles" />
    </Copy>
    <AjaxMin JsSourceFiles="@(JavaScriptFiles)" JsSourceExtensionPattern="\.src.js$" JsTargetExtension=".js"
              CssSourcefiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".css"></AjaxMin>  
  </Target>

4. 프로젝트를 다시 로드하고 빌드를 해보면 위에서 설정한 디렉토리에 경량화가 된 정적 콘텐츠들을 확인할 수 있다.