SharePoint의 축소 및 묶기

아티클
05/03/2024

이 문서에서는 웹 Essentials 축소 및 번들 기술을 사용하여 HTTP 요청 수를 줄이고 SharePoint에서 페이지를 로드하는 데 걸리는 시간을 줄이는 방법을 설명합니다.

웹 사이트를 사용자 지정할 때 사용자 지정을 지원하기 위해 서버에 많은 수의 추가 파일을 추가할 수 있습니다. JavaScript, CSS 및 이미지를 추가하면 서버에 대한 HTTP 요청 수가 증가하므로 웹 페이지를 표시하는 데 걸리는 시간이 늘어나게 됩니다. 동일한 형식의 파일이 여러 개 있는 경우 이러한 파일을 번들로 묶어 이러한 파일을 더 빠르게 다운로드할 수 있습니다.

JavaScript 및 CSS 파일의 경우 minification이라는 접근 방식을 사용할 수도 있습니다. 여기서는 공백 및 필요하지 않은 다른 문자를 제거하여 파일의 총 크기를 줄일 수 있습니다.

JavaScript 및 CSS 파일을 웹 Essentials 축소 및 묶기

웹 Essentials 같은 타사 소프트웨어를 사용하여 CSS 및 JavaScript 파일을 번들로 묶을 수 있습니다.

중요

웹 Essentials 타사 오픈 소스 커뮤니티 기반 프로젝트입니다. 이 소프트웨어는 Visual Studio 2012 및 Visual Studio 2013 대한 확장이며 Microsoft에서 지원되지 않습니다. 웹 Essentials 다운로드하려면 웹 Essentials 2012의 웹 사이트를 방문하세요.

웹 Essentials 두 가지 형태의 번들링을 제공합니다.

.bundle: CSS 및 JavaScript 파일의 경우
.sprite: 이미지의 경우(Visual Studio 2013만 사용 가능)

다음과 같은 사용자 지정 master 페이지 내에서 참조되는 일부 브랜딩 요소가 있는 기존 기능이 있는 경우 웹 Essentials 사용할 수 있습니다.

사용자 지정 master 페이지의 브랜드 요소 스크린샷

웹 Essentials TE000127218 및 CSS 번들을 만들려면

Visual Studio의 솔루션 탐색기 번들에 포함할 파일을 선택합니다.
선택한 파일을 마우스 오른쪽 단추로 클릭한 다음 상황에 맞는 메뉴에서 웹 Essentials>Create JavaScript 번들 파일을 선택합니다. 예시:

JavaScript 및 CSS 파일 번들링 결과 보기

JavaScript 및 CSS 번들을 만들 때 웹 Essentials JavaScript 및 CSS 파일과 다른 구성 정보를 식별하는 레시피 파일이라는 XML 파일을 만듭니다.

JavaScript 및 CSS 레시피 파일의 스크린샷

또한 minify 플래그가 번들링 레시피에서 true로 설정되면 파일의 크기가 줄어들고 함께 번들로 묶입니다. 즉, master 페이지에서 참조할 수 있는 JavaScript 파일의 축소된 새 버전이 만들어졌습니다.

true로 설정된 minify 플래그의 스크린샷

웹 사이트에서 페이지를 로드할 때 인터넷 Explorer 11과 같은 웹 브라우저의 개발자 도구를 사용하여 서버로 전송된 요청 수와 각 파일이 로드되는 데 걸린 기간을 확인할 수 있습니다.

다음 그림은 축소하기 전에 JavaScript 및 CSS 파일을 로드한 결과입니다.

다운로드 중인 80개 항목을 보여 주는 스크린샷

CSS 및 JavaScript 파일을 함께 묶은 후 요청 수가 74개로 감소했으며 각 파일은 개별적으로 다운로드하는 데 원래 파일보다 약간 더 오래 걸렸습니다.

다운로드 중인 74개 항목을 보여 주는 스크린샷

번들링 후 JavaScript 번들 파일은 815KB에서 365KB로 크게 줄어듭니다.

축소된 다운로드 크기를 보여 주는 스크린샷

이미지 스프라이트를 만들어 이미지 번들링

JavaScript 및 CSS 파일을 번들로 묶는 방법과 마찬가지로 많은 작은 아이콘 및 기타 일반적인 이미지를 더 큰 스프라이트 시트에 결합한 다음 CSS를 사용하여 개별 이미지를 표시할 수 있습니다. 사용자의 웹 브라우저는 각 개별 이미지를 다운로드하는 대신 스프라이트 시트를 한 번 다운로드한 다음 로컬 컴퓨터에 캐시합니다. 이렇게 하면 웹 서버로의 다운로드 및 왕복 수를 줄임으로써 페이지 로드 성능이 향상됩니다.

Web Essentials**에서 이미지 스프라이트를 만들려면

Visual Studio의 솔루션 탐색기 번들에 포함할 파일을 선택합니다.
선택한 파일을 마우스 오른쪽 단추로 클릭한 다음 상황에 맞는 메뉴에서 웹 Essentials>Create 이미지 스프라이트를 선택합니다. 예시:
스프라이트 파일을 저장할 위치를 선택합니다. .sprite 파일은 스프라이트의 설정 및 파일을 설명하는 XML 파일입니다. 다음 그림에서는 스프라이트 PNG 파일과 해당 .sprite XML 파일의 예를 보여 줍니다.

다음을 통해 공유