YUI Compressor 을 이용한 웹 프로그램 성능 개선

웹브라우저를 통하여 실행되는 웹 프로그램은 가능한 가볍게 만드는 것이 중요하다.
가벼운 웹 프로그램을 만드는 가장 간단한 작업은 코드 축소, HTTP 압축등이 있다.

코드 축소와 관련하여 자바 스크립트 코드를 축소하는데 가장 널리 사용되는 도구에는 여러가지가 있지만 개인적으로는 YUI Compressor 를 선호한다.

참고로 CompressorRater 웹 사이트에서는 여러 도구들에 대한 성능 테스트할 수 있는 웹 기반의 도구를 제공하고 있다.

Eclipse Plugin 설치

Eclipse 에서 설치는 아주 간단하다. 다음의 버튼을 드레그하여 실행중인 Eclipse 에 끌어다 놓으면 설치가 진행된다. ( 플러그인 설치 사이트 )

Eclipse 에서 사용하기 

코드 축소 대상을 선택하고 오른쪽 마우스 버튼을 클릭후 External Tools > Compress CSS 선택한다.
주의할 것은 동일 이름의 파일이 이미 존재하는 경우는 정상적으로 코드 축소 파일이 생성되지 않는다.


Eclipse Maven 에서 사용하기 

프로젝트를 Maven 을 사용하여 빌드하고 있다면 pom.xm 파일에 코드 압축 관련 설정을 통하여 빌드시 자동으로 처리되도록 할 수 있다.

먼저 YUI Compressor Maven plugin 플러그인을 사용하도록 pom.xml 파일을 아래와 같이 수정해주어야한다.

 

   net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    

다음으로 프로젝트의 스크립트 및 CSS 소스가 WebContent 폴더에 존재하고 아래와 같은 구조로 되어있다고 가정하자.


WebContent
├── css
    ├── community.ui
    └── bootstrap
├── js
└── fonts


또한 WebContent/css/community.ui 폴더의 특정 css 들만을 소스 압축하려고 한다고 하면 그리고 압축파일은 min.css 형식을 원한다면 다음과 같은 설정이 필요하다.

 

    
        net.alchim31.maven
        yuicompressor-maven-plugin
        1.5.1
        
          
            
              compress
            
          
           
        
            utf-8
            true
            
            .min   
            
            
            **/css/community.ui/community.ui.core.css
            **/css/community.ui/community.ui.glogals.css
            **/css/community.ui/community.ui.style.css
            
            ${basedir}/WebContent
            ${basedir}/WebContent 
                       
    

이제 Maven 빌드시 goals 을 package 또는 yuicompressor:compress 지정하여 파일 압축을 처리할 수 있다.

결론

일반적으로는 execludes 속성을 사용하여 기술하지만 대부분의 오픈소스들은 이미 소스 압축된 파일들을 제공하고 있고 직접 만들어 사용하는 css 또는 javascript 들만 압축을 하면 되기 때문에 위와 같이 include 옵션을 사용했다.