JS/CSS를 한 파일로 합쳐 요청 수를 줄이자

얼마 전 야후에서 발표한 YSlow는 몇 가지 원칙에 따라 웹 페이지를 분석해서 보다 나은 성능을 낼 수 있도록 도와주는 파이어폭스 플러그인이다. 여기서 언급한 13가지의 원칙은 대부분의 상황에 1~2시간이면 적용할 수 있는 것들이므로 한번씩 찾아보고 적용해보면 좋을 것이다. 그 중 가장 큰 효과를 볼 수 있는 것은 바로 첫 번째 규칙 'HTTP 요청 수를 줄이라'는 것이다. 요청 수를 줄이면 로딩에 걸리는 시간이 줄어들 것은 당연한 이치다.

 

그림_1.png

 

HTTP 요청을 줄이려면 어떻게 해야 할까? 가장 쉬운 방법은 자바스크립트와 css 파일을 하나로 합치는 것이다. 요즘 웹 애플리케이션이라고 불리는 사이트들을 보면 최소 5개에서 많게는 20개도 넘는 js, css 파일을 로드하는 것을 알 수 있다. 스프링노트는 5개의 css 파일과 28개의 js 파일을 로드한다(이는 파일을 쪼개는 것이 관리가 편하기 때문이기도 하다. 그리고 프로덕션 환경에서는 합치면 그만이라는 생각도 한몫 했다).

 

레일스 애플리케이션이라면 아주 간단하게 js, css 파일을 하나로 합칠 수 있다. 여기서 그 방법을 소개한다.

 

Edge Rails

레일스의 최신 개발버전(trunk)를 사용한다면, 이 글을 더 읽을 필요도 없다. 단지 레이아웃을 담당하는 뷰 파일(아마 application.html.erb)에 아래와 같이 적어주기만 하면 된다.

 

  1. stylesheet_link_tag :all
  2. javascript_include_tag :all

 

위와 같이 적어주면 현재 환경의 캐시 설정 값(ActionController::Base.perform_caching)에 따라 알맞은 적업을 수행한다. 즉, 캐시를 사용하지 않는 개발 환경에서는 모든 파일을 하나씩 포함하고, 캐시를 사용하도록 설정한 프로덕션 환경에서는 모든 css, js 파일을 각각 all.css, all.js 로 합쳐서 한번에 전송한다. 간결하고 실용적인 방법을 제시하는 것이 역시 레일스답다.

 

모든 js 파일이 아니라 일부만을 보내고 싶다면 아래와 같은 방법도 있다.

 

  1. javascript_include_tag "prototype", "cart", "checkout", :cache => "shop"

 

이제 prototype.js, cart.js, checkout.js가 shop.js라는 하나의 파일로 합쳐질 것이다.

 

더 자세한 내용은 레일스 소스 코드(actionpack/lib/action_view/helpers/asset_tag_helper.rb)를 참조하기 바란다.

 

AssetPackager 플러그인

아직 EdgeRails를 사용하고 있지 않아도 걱정 없다. 비슷한 일을 더 잘 해주는 AssetPackager 플러그인이 있기 때문이다.

 

사용법은 간단하다. 일단 플러그인을 설치한다.

 

  1.    ./script/plugin install http://sbecker.net/shared/plugins/asset_packager

 

그리고 설정 파일을 생성한다.

 

  1. asset:packager:create_yml

 

생성된 설정 파일 config/asset_packages.yml을 수정한다. 그리고 뷰 파일을 아래처럼 고쳐준다.

 

  1. javascript_include_merged :base

 

실제로 파일을 합치기 위해서는 다음 명령을 실행해줘야 한다.

 

  1. rake asset:packager:build_all

 

이 때 일어나는 일은 EdgeRails 경우와 동일하다. 더 자세한 내용은 플러그인 홈페이지나 문서를 참조하기 바란다. 그런데 AssetPakcager를 사용할 때는 주의할 점이 몇 가지 있다.

 

  1. 배포 전 스테이징 환경에서 테스트가 필요하다. 위 플러그인을 사용하는 경우 개발 환경과 실제 서비스 환경이 약간 달라질 수 있다. 그러므로 프로덕션 환경과 동일한 스테이징 환경을 갖추고 테스트하는 것이 중요하다. 특히나 설정 파일에 오류가 있는 경우에는 개발 중에는 발견되지 않고, 아무 문제가 없다가 배포를 하면 문제가 될 수도 있다. 주의를 요한다.
  2. 합쳐진 파일 이름에 주의한다. 규칙은 서브버전 리비전 번호나 파일의 최종 수정 시간을 덧붙여서 파일을 생성한다. 그래서 웹 서버가 여럿인 경우 스테이징 장비에서 파일을 빌드해서 배포해야 한다. 그렇지 않으면 서버마다 다른 이름으로 파일이 생성되어 문제가 될 수도 있다.
  3. 이전 빌드 파일을 한동안 지우지 않는 것이 좋다. 브라우저의 특성상 캐시에 의한 이전 버전 요청이 있을 수도 있기 때문이다.
  4. 자바스크립트 파일은 반드시 세미콜론(;)을 붙여서 작성한다. 플러그인에서 자바스크립트를 합칠 때 줄 바꿈을 모두 제거하기 때문이다. 세미콜론이 없으면 문법 오류가 발생할 것이다. 소스 코드를 수정해서 줄 바꿈을 유지하도록 하는 방법도 있다.

 

일부는 EdgeRails에도 해당하는 사항이다. 성능 향상을 위해서는 다소의 불편함을 감수해야 한다. 하지만, js/css 파일을 하나로 합치는 것은 그 불편함을 감내할 만큼 충분한 가치를 주는 것이므로 적극 추천한다.

 

참고 자료