Maven yuicompressor-maven-plugin을 사용하여 js, css 경량화(minify)하기

Maven YUI plugin으로 JS, CSS 코드 경량화(minify)

Maven을 사용한 프로젝트를 진행하며 js, css 경량화를 위한 도구를 찾아보던 중 yuicompressor-maven-plugin을 접하게 되었다. 이번 프로젝트에서는 view를 위한 별도의 프레임워크를 사용하지 않고 스프링부트 + jsp를 사용하여 웹 페이지를 작업하였기에 js와 css 경량화를 위해 고민을 하고 있던 상황이었다.

 

목차
1. 코드 경량화(minify)란
2. 플러그인 적용 예시
3. 플러그인 사용 후기

 

1. 코드 경량화(minify)란

코드 경량화란 단순하게 파일의 사이즈를 줄이는 것이라고 생각하면 편하다. 경량화를 통해 네트워크 부하를 줄이고 페이지 로딩 속도를 향상할 수 있다. 덤으로 사용자가 코드를 해석하기 어렵게 만든다. 이와 관련된 정보는 웹에서 쉽게 찾아볼 수 있으므로 생략... 참고용으로 CSS 코드 경량화에 대한 생활코딩 링크를 달아본다.

 

https://opentutorials.org/course/2418/13512

코드 경량화(minify) - 생활코딩

 

 

2. 플러그인 적용 예시

Java + JSP를 사용한 프로젝트에서 CSS와 JS파일의 코드 경량화를 위해 어떤 방법이 있을지 찾아보던 중 Maven plugin 중 yuicompressor-maven-plugin 이란 것을 알게 되었다. 사용 방법을 열심히 구글링 하여 아래와 같이 적용해 보았다.

<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
			<configuration>
				<excludes>
					<exclude>
						<groupId>org.projectlombok</groupId>
						<artifactId>lombok</artifactId>
					</exclude>
				</excludes>
			</configuration>
		</plugin>
            
		<plugin>
			<groupId>net.alchim31.maven</groupId>
			<artifactId>yuicompressor-maven-plugin</artifactId>
			<version>1.5.1</version>
			<executions>
				<execution>
					<id>css-minify</id>
					<goals>
						<goal>compress</goal>
					</goals>
				</execution>
			</executions>   
			<configuration>
				<encoding>UTF-8</encoding>
				<nomunge>true</nomunge>
				<force>true</force>
				<suffix>.min</suffix>   
				<includes>
					<!-- 압축을 원하는 파일을 기술 -->
					<include>**/static/**/*.css</include>
				</includes>
				<excludes>
					<exclude>**/static/lib/**/*.css</exclude>
					<exclude>**/*.min.css</exclude>
				</excludes>
				<sourceDirectory>${project.basedir}/src/main/resources/static/css</sourceDirectory>
			</configuration>               
		</plugin>
            
	</plugins>
</build>

include에 경량화 대상 파일을 와일드카드로 적고 exclude에 제외할 파일들(이미 경량화가 적용된 파일들)을 적는다.

기타 자세한 사용법은 공식 사이트를 참고하면 된다.

 

http://davidb.github.io/yuicompressor-maven-plugin/plugin-info.html

YUI Compressor Maven Mojo - Plugin Documentation

작성이 완료되었다면 maven update를 통해 플러그인을 받고 maven install 또는 package를 실행하면 된다.

 

 

3. 플러그인 사용 후기

CSS파일의 경우 경량화가 잘 된다. 배포 시에는 문제가 되지 않으나 개발할 때는 CSS 파일 수정 후 IDE에서 매번 maven install을 수동으로 해 주어야 적용이 되니 적잖이 불편하다. 다행히 CSS 파일을 수정할 일이 많지 않아 크게 문제가 되지는 않았다.

 

오래된 플러그인이다 보니 JS(Javascript) 파일의 경우 아쉽게도 ES6 이상을 지원하지 않는다...는 것을 몇 번의 시도 끝에 알게 되었다. (이와 관련된 부분은 아래 이슈 링크 참조)

https://github.com/yui/yuicompressor/issues/262

Doesn't Support JavaScript (ES6/ES2015)? · Issue #262 · yui/yuicompressor

 

그래서 다른 방법을 고민하던 중 아래 minifier 사이트에서 수동으로... min.js 파일을 작성하였다. (더 찾아보기 귀찮아서 적용할 파일이 몇 개 되지 않아서)

https://www.minifier.org/

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.