ASP.NET Core에서 정적 자산 번들링 및 축소하기

작성자: Scott Addie 및 David Pine

이 문서에서는 ASP.NET Core 웹 응용 프로그램에서 번들링 및 축소를 사용하는 방법을 비롯해서 이러한 기능을 적용하여 얻을 수 있는 이점을 설명합니다.

번들링 및 축소란 무엇입니까?

번들링 및 축소는 웹 앱에 적용할 수 있는 두 가지 고유한 성능 최적화입니다. 번들링 및 축소를 함께 사용하면 서버 요청 수를 줄이고 요청된 정적 자산의 크기를 줄여서 성능을 향상시킬 수 있습니다.

번들링 및 축소는 주로 첫 번째 페이지의 요청 로드 시간을 개선합니다. 브라우저는 웹 페이지가 요청되면 정적 자산(JavaScript, CSS 및 이미지)을 캐시합니다. 따라서 동일한 자산을 요구하는 동일한 사이트에서 동일한 페이지(들)를 요청하는 경우에는 번들링 및 축소로 성능을 개선하지 못합니다. 만료 헤더가 자산에 올바르게 설정되지 않고 번들링 및 축소가 사용되지 않는 경우 브라우저의 새로 고침 추론은 며칠 후 자산 부실을 표시합니다. 게다가 브라우저는 각 자산에 대한 유효성 검사 요청을 필요로 합니다. 이 경우 번들링 및 축소는 첫 번째 페이지 요청 이후라도 성능 개선을 제공합니다.

묶음

묶음은 여러 파일을 단일 파일로 결합합니다. 번들링은 웹 페이지 같은 웹 자산을 렌더링하는데 필요한 서버 요청의 수를 줄입니다. CSS, JavaScript 등에 대한 개별 번들을 원하는 수만큼 만들 수 있습니다. 파일 수가 적다는 것은 브라우저에서 서버로 또는 애플리케이션을 제공하는 서비스에서 HTTP 요청이 적다는 것을 의미합니다. 따라서 첫 번째 페이지 로드 성능이 향상됩니다.

축소

축소는 기능 변경 없이 코드에서 불필요한 문자를 제거합니다. 결과적으로 요청된 자산(CSS, 이미지 및 JavaScript 파일 같은)의 크기가 크게 감소합니다. 일반적인 축소의 부수적인 작용은 변수 이름을 한 문자로 줄이고 주석과 불필요한 공백을 제거하는 것입니다.

다음 JavaScript 함수를 살펴보시기 바랍니다.

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

축소는 이 함수를 다음과 같이 줄입니다.

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

주석과 불필요한 공백을 제거하는 것 외에도 다음 매개 변수 및 변수 이름이 다음과 같이 변경되었습니다.

Original	이름이 바뀜
imageTagAndImageID	t
imageContext	a
imageElement	r

번들링 및 축소의 영향

다음 표는 자산을 개별적으로 로드하는 경우와 일반적 웹앱 번들링 및 축소를 사용하는 경우의 차이를 간략히 보여줍니다.

작업	B/M 제외	B/M 포함	축소
파일 요청	18	7	61%
전송된 바이트(KB)	265	156	41%
로드 시간(ms)	2360	885	63%

로드 시간이 향상되었지만 이 예제는 로컬로 실행되었습니다. 네트워크를 통해서 전송되는 자산에 대해 번들링 및 축소를 사용하면 큰 성능 향상을 얻을 수 있습니다.

이전 표의 수치를 생성하는 데 사용되는 테스트 앱은 지정된 앱에 적용되지 않을 수 있는 일반적인 개선 사항을 보여 줍니다. 앱을 테스트하여 번들링 및 축소가 향상된 로드 시간을 생성하는지 확인하는 것이 좋습니다.

번들링 및 축소 전략 선택하기

ASP.NET Core는 오픈 소스 번들 및 축소 솔루션인 WebOptimizer와 호환됩니다. 설정 지침 및 샘플 프로젝트는 WebOptimizer를 참조하세요. ASP.NET Core는 네이티브 번들링 및 축소 솔루션을 제공하지 않습니다.

Gulp 및 Webpack과 같은 타사 도구는 번들링 및 축소를 위한 워크플로 자동화와 linting 및 이미지 최적화를 제공합니다. 묶음 및 축소를 사용하여 앱 배포 전에 축소된 파일이 생성됩니다. 배포 전 묶음 및 축소는 서버 부하 감소라는 이점을 제공합니다. 그러나 묶음 및 축소는 빌드 복잡성을 높이고 정적 파일에만 작동한다는 것을 인식하는 것이 중요합니다.

환경 기반 번들링 및 축소

프로덕션 환경에서는 번들링되고 축소된 앱의 파일을 사용하는 것이 가장 좋습니다. 개발하는 중에는 원본 파일을 사용해야 앱을 손쉽게 디버깅할 수 있습니다.

뷰에서 Environment 태그 도우미를 사용하여 페이지에 포함할 파일을 지정합니다. Environment 태그 도우미는 특정 환경에서 실행될 때만 자신의 내용을 렌더링합니다.

다음 environment 태그는 Development 환경에서 실행하는 경우에만 처리되지 않은 CSS 파일을 렌더링합니다.

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

다음 environment 태그는 Development가 아닌 환경에서 실행할 때 번들링되고 축소된 CSS 파일을 렌더링합니다. 예를 들어 Production이나 Staging에서 실행하면 다음 스타일시트의 렌더링이 트리거됩니다.

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

추가 리소스

• 다양한 환경 사용하기
• 태그 도우미