메이븐 프로젝트에서 js 및 css Minify(압축)하기

웹프로그래밍을 처음 시작할 때, js / css 파일들을 minify 해줘야한다는 생각은 1이라도 해보았지만, 실천한 적은 단 한번도 없었다. 왜냐하면 귀찮기도 하고, 이게 무슨 영향이 있나. 어차피 나만 잘보이면 되고, 클라이언트만 잘되면 되니까. 그런걸 고려한 적이 없었다. 하지만 장기적으로 생각해보았을 때 minify 해야되는 이유는 몇가지 되는 듯 하다.

1. 서버가 위치된 지역과 다른 지역의 유저가 해당 홈페이지로 접근할 때의 송신 속도 문제
2. 트래픽 최소화 문제
3. 로딩 속도 최적화 문제

자바, 스프링 기반으로 된 프로젝트에서 js 및 css를 압축하는 일은 엄청 번거로운 일이다. 여기에 덧붙여 아파치 타일즈같은 레이아웃 라이브러리를 적용중이라면 파일 압축을 어떻게 해야할까? 문득 찾다보니 minify 해주는 라이브러리 또한 있었다.

Minification of JS and CSS

asset 파일들인 자바스크립트와 css를 minify해주는 플러그인은 몇몇 이미 상용화되어 사용되고 있지만, 저자가 사용한 플러그인을 소개하겠다.

net.alchim31.maven:yuicompressor-maven-plugin

위 플러그인인데, 적용 방법은 이렇다.

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>
Colored by Color Scripter

cs

위 코드를 pom.xml 의 <plugins> 안쪽에 정의해주면 된다.
만약 예외적으로 사용하고 싶을 경우도 있어 그런 경우의 코드도 준비해두었다.

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

<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>
        <nosuffix>true</nosuffix>
    </configuration>
</plugin>
Colored by Color Scripter

cs

- nosuffix 속성이 true가 아니면, 기본 css파일명이 index.css라면 index-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
30

<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>
        <nosuffix>true</nosuffix>
        <webappDirectory>${project.build.directory}/min</webappDirectory>
    </configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
    <webResources>
        <resource>
            <directory>${project.build.directory}/min</directory>
        </resource>
    </webResources>
    <excludes>
        <exclude>**/*.min.js</exclude>
    </excludes>
</configuration>
</plugin>
Colored by Color Scripter

cs

- war 파일도 압축을 적용하고 싶다면, plugin을 하나 더 적용해야 한다. maven-war-plugin 을 적용해야 빌드시킨 war파일도 minify된다.
- webappDirectory는 작성하지 않을 경우 ${project.build.directory} 으로 초기화된다. (디폴트 webapps)
- exclude 속성에 제외시킬 파일명들을 적는다. (압축대상에서 제외가 된다.)

마지막으로, 압축시키다가 에러가 난다면, 자바스크립트 혹은 css 문법적 오류일 확률이 높다. 이점 유의해주면 될듯 싶다.