SharePoint Online의 축소 및 묶음

이 문서에서는 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에서 TE000127218 및 CSS 번들을 만들려면

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

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

    웹 필수 요소 메뉴 옵션을 나타내는 스크린샷

JavaScript 및 CSS 파일 묶음 결과 보기

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

JavaScript 및 CSS 조리법 파일

또한 묶음 조리법에서 minify 플래그가 true로 설정된 경우 파일의 크기가 줄어들 뿐만 아니라 파일이 함께 묶입니다. 즉, 마스터 페이지에서 참조할 수 있는 새로운 축소된 버전의 JavaScript 파일이 만들어졌습니다.

True로 설정된 축소 플래그 스크린샷

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

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

다운로드 중인 80 항목을 나타내는 스크린샷

CSS 및 JavaScript 파일을 함께 묶은 후 요청 수는 74개로 감소했고 각 파일은 원래 파일을 개별적으로 다운로드할 때보다 시간이 약간만 더 걸렸습니다.

다운로드 중인 74 항목을 나타내는 스크린샷

묶은 후 JavaScript 번들 파일은 815KB에서 365KB로 상당히 감소했습니다.

줄어든 다운로드 크기를 나타내는 스크린샷

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

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

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

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

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

    이미지 스프라이트를 만드는 방법을 나타내는 스크린샷
  3. 스프라이트 파일을 저장할 위치를 선택합니다. .sprite 파일은 스프라이트의 설정 및 파일을 설명하는 XML 파일입니다. 다음 그림은 스프라이트 PNG 파일 및 해당 .sprite XML 파일의 예를 보여 줍니다.

    스프라이트 파일 스크린샷

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

Office 기술 확장
교육 살펴보기
새로운 기능 우선 가져오기
Office Insider 참여

이 정보가 유용한가요?

의견 주셔서 감사합니다!

피드백을 주셔서 감사합니다. Office 지원 에이전트와 연락하는 것이 도움이 될 것 같습니다.

×