SharePoint Online의 축소 및 묶음

  • 아티클

 

마지막으로 수정된 항목: 2014-10-28

요약: Web Essentials에서 축소 및 묶음 방법을 사용하여 HTTP 요청 수를 줄이고 SharePoint Online에서 페이지를 로드하는 데 걸리는 시간을 단축하는 방법을 설명합니다.

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

JavaScript 및 CSS 파일의 경우 축소라는 방식을 사용할 수도 있습니다. 이 경우 필요하지 않은 공백과 기타 문자를 제거하여 파일의 전체 크기를 줄일 수 있습니다.

Web Essentials에서 JavaScript 및 CSS 파일 축소 및 묶음

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

중요

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

Web Essentials는 묶음을 다음과 같은 두 가지 형태로 제공합니다.

  • .bundle: CSS 및 JavaScript 파일용

  • .sprite: 이미지용(Visual Studio 2013에서만 사용 가능)

다음과 같이 사용자 지정 마스터 페이지 내에서 참조되는 일부 브랜딩 요소와 기존 기능을 사용하는 경우 Web Essentials를 사용할 수 있습니다.

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

Web Essentials에서 JavaScript 및 CSS 묶음을 만들려면

  1. Visual Studio의 솔루션 탐색기에서 묶음에 포함할 파일을 선택합니다.

  2. 선택한 파일을 마우스 오른쪽 단추로 클릭한 다음 상황에 맞는 메뉴에서 Web Essentials>JavaScript 번들 파일 만들기를 선택합니다. 예를 들면 다음과 같습니다.

    Web Essentials 메뉴 옵션을 보여 주는 스크린샷

CSS 및 JavaScript 파일 묶음 결과 보기

CSS 및 JavaScript 번들 파일을 만들 때 Web Essentials는 JavaScript 및 CSS 파일과 일부 기타 구성 정보를 식별하는 조리법 파일이라는 XML 파일을 만듭니다.

JavaScript 및 CSS 조리법 파일의 스크린샷

또한 minify 플래그가 묶음 조리법에 true로 설정되어 있으면 파일 크기를 줄인 후 함께 묶습니다. 즉, 축소된 새 버전의 JavaScript 파일이 만들어지고 마스터 페이지에 참조할 수 있게 됩니다.

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

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

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

다운로드되는 80가지 항목을 보여 주는 스크린샷

CSS 및 JavaScript 파일을 함께 묶은 후에는 요청 수가 74로 감소했으며 각 원본 파일을 따로 다운로드할 때보다 시간이 약간 더 소요되었습니다.

다운로드되는 74가지 항목을 보여 주는 스크린샷

묶은 후에 JavaScript 번들 파일의 크기는 815KB에서 365KB로 크게 감소했습니다.

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

이미지 스프라이트를 만들어 이미지 묶기

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

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

  1. Visual Studio의 솔루션 탐색기에서 묶음에 포함할 파일을 선택합니다.

  2. 선택한 파일을 마우스 오른쪽 단추로 클릭한 다음 상황에 맞는 메뉴에서 Web Essentials와 이미지 스프라이트 만들기를 선택합니다. 예를 들면 다음과 같습니다.

    이미지 스프라이트를 만드는 방법을 보여 주는 스크린샷

  3. 스프라이트 파일이 저장될 위치를 선택합니다. .sprite 파일은 스프라이트의 파일 및 설정을 설명하는 XML 파일입니다. 다음 그림은 스프라이트 PNG 파일 및 해당 .sprite XML 파일의 예를 보여 줍니다.

    스프라이트 파일의 스크린샷

    스프라이트 XML 파일의 스크린샷