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 파일을 아래와 같이 수정해주어야한다.

?

1 2 3 4 5 6 7 8 9 10 11 12

<plugin>    <groupid>net.alchim31.maven</groupid>     <artifactid>yuicompressor-maven-plugin</artifactid>     <version>1.5.1</version>     <executions>         <execution>             <goals>                 <goal>compress</goal>             </goals>         </execution>     </executions> </plugin>

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


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


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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<plugins>     <plugin>         <groupid>net.alchim31.maven</groupid>         <artifactid>yuicompressor-maven-plugin</artifactid>         <version>1.5.1</version>         <executions>           <execution>             <goals>               <goal>compress</goal>             </goals>           </execution>         </executions>           <configuration>             <encoding>utf-8</encoding>             <nomunge>true</nomunge>             <!-- <force>true</force>-->             <suffix>.min</suffix>               <includes>             <!-- 압축을 원하는 파일을 기술 -->             <include>**/css/community.ui/community.ui.core.css</include>             <include>**/css/community.ui/community.ui.glogals.css</include>             <include>**/css/community.ui/community.ui.style.css</include>             </includes>             <sourcedirectory>${basedir}/WebContent</sourcedirectory>             <outputdirectory>${basedir}/WebContent</outputdirectory>         </configuration>                   </plugin> <plugins> </plugins></plugins>

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

결론

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