서버 측 JS 및 CSS 파일 병합 및 압축

저자：Eve Cole 업데이트 시간：2010-06-14 18:58:46

2서버측에서 JavaScript, CSS 파일을 병합하고 압축합니다.

웹 성능 최적화를 위한 가장 중요한 모범 사례 중 하나는 HTTP 요청을 줄이는 것이며 이는 YSlow에서 가장 중요한 규칙이기도 합니다. HTTP 요청을 줄이는 솔루션에는 JavaScript 및 CSS 파일 병합, CSS Sprites, 이미지 맵, 데이터 URI를 사용하여 이미지 인코딩이 포함됩니다. CSS Sprite 와 이미지 매핑은 이제 널리 사용 가능하지만 IE6 및 IE7은 데이터 URI를 지원하지 않으며 성능 문제로 인해 이 기술은 널리 사용되지 않았습니다. 현재 대부분의 웹페이지에 있는 JavaScript 및 CSS 파일 수는 개발 당시와 동일합니다. 소수의 웹페이지는 실제 상황에 따라 로컬로 병합됩니다. 이러한 병합 중 상당수는 수동으로 선택적으로 수행됩니다. 새로운 병합을 완료하고 서버에 업로드하는 작업은 각각 로컬에서 다시 수행해야 하며, 동일한 파일을 압축하는 작업도 비슷한 상황입니다. 서버 측 병합 및 압축을 사용하면 개발 논리에 따라 파일 세분성을 최대한 작게 만들 수 있으며 웹 페이지의 URL 규칙을 사용하여 파일을 자동으로 병합하고 압축할 수 있으므로 매우 유연하고 효율적입니다.

YUI 콤보 핸들러

2008년 7월, YUI 팀은 YAHOO! CDN에서 YUI JavaScript 구성 요소에 대한 콤보 핸들러 서비스를 제공할 것이라고 발표했습니다. Combo Handler는 Yahoo!에서 개발한 Apache 모듈로, 개발자가 URL을 통해 JavaScript와 CSS 파일을 간단하고 편리하게 결합할 수 있어 파일 요청 수를 크게 줄일 수 있습니다. 예를 들어 페이지에서 YUI2의 서식 있는 텍스트 편집기 구성 요소를 사용하려면 여러 JavaScript 파일을 도입해야 합니다. 일반적인 방법은 다음과 같습니다.

콤보 핸들러 서비스를 사용한 후 위 코드는 다음과 같이 작성할 수 있습니다.

콤보 핸들러 서비스를 사용하면 코드의 가독성이 약간 떨어지는 것 외에도 HTTP 요청 수가 크게 줄어들고 웹 성능 최적화에 중요한 URL 코드의 양도 줄어듭니다. 따라서 YUI 2.6.0부터 핵심 구성 요소인 YUI Loader에는 콤보 처리 기능이 내장되어 있습니다. 즉, YUI Loader를 사용할 때 결합 속성을 구성하면 로드할 여러 JavaScript 또는 CSS 파일을 로드할 수 있습니다. 정적 파일 서버가 콤보 핸들러를 지원하는 한 콤보 핸들러 서비스를 사용하는 형태입니다. YUI에서 결합이 true로 구성되면 CDN은 기본적으로 Yahoo! CDN( http://yui.yahooapis.com )을 사용하므로 문제가 없습니다. 이것이 YUI의 가장 매력적인 부분 중 하나입니다.

안타깝게도 중국의 http://yui.yahooapis.com 속도는 그다지 좋지 않습니다. 원래 Yahoo China에서는 http://cn.yui.yahooapis.com/ 을 제공했지만 아직 Combo Handler 서비스를 제공하지 않았습니다. 동시에 여러 가지 이유로 인해 YUI 2.7.0 이후 업데이트가 중단되었습니다. 더 나쁜 점은 야후!가 Combo Handler를 지원하기 위해 개발한 아파치 모듈이 오픈 소스로 계획되어 있다고는 하지만, 적어도 현재로서는 이를 사용하려면 유사한 기능을 직접 구현해야 하기 때문에 단점이 있습니다. 중국에서는 유사한 기술을 적용한 사례가 많지 않습니다.