자바스크립트 옵티마이저 - Closure Compiler

클라이언트 측 웹프로그래밍에서 자바스크립트의 비중이 점점 높아지고 있는 것 같습니다. 일반 홈페이지는 물론 업무용 웹 프로그램에서는 엄청난 양의 자바스크립트 코딩을 해야하는 경우가 많습니다. 이런 자바스크립트는 .js 파일로 만들어져 재사용 됩니다.

 

자바스크립트의 양이 많아지니까 페이지 로딩에 부담을 줄이기 위해서 자바스크립트를 압축하는 방법이 많이 나왔습니다. 실제 gzip으로 압축하여 전송하는 것은 클라이언트(웹 브라우저)가 지원한다면 서버에서 지원하는 기능을 사용하게 됩니다.

 

단순히 자바스크립트 압축이라고 하면 자바스크립트내의 주석을 삭제하고, 화이트 스페이스를 제거해서 파일 크기를 줄이는것을 말했습니다.

 

이번에 알아볼 Closure Compiler는 기계어로 컴파일 하는 것은 아니고, 파일 크기를 줄여 다운로드 속도를  높여주고, 그것 뿐만 아니라 자바스크립트 코드를 분석해서 최적화하여 실행 속도도 높여 줍니다.

 

다음 주소가 Closure Compiler 사이트 입니다.

 

https://developers.google.com/closure/compiler/

 

 

Colsure Compiler는 다음과 같은 세 가지 방법으로 사용할 수 있습니다.

 

1. 간단한 웹 애플리케이션으로 기능을 제공합니다.

 

웹사이트에 접속하여 javascript 코드를 붙여넣기 하여 컴파일 하거나, js 파일의 URL을 입력하여 컴파일 할 수 있습니다. URL을 입력해야 하므로 외부에서 접속할 수 있는 웹 사이트에 js파일을 올려서 컴파일 해야 합니다.

 

2. Java 로 만들어진 명령행 프로그램을 다운로드 받아서 실행해서 컴파일 할 수 있습니다.(js 파일을 올려둘 웹사이트가 필요 없습니다.)

 

다음주소에서 프로그램 파일을 다운로드 받을 수 있습니다.

 

https://dl.google.com/closure-compiler/compiler-latest.zip

 

3. 제공되는 RESTful API를 사용해서 컴파일 하는 프로그램 인터페이스를 직접 만들어서 사용할 수 있습니다.

 

 

이 세가지 방법중에서 웹 애플리케이션과 자바 프로그램의 사용법을 알아 보겠습니다.

 

웹 애플리케이션으로 컴파일 하는 방법 입니다. 다음 웹사이트에 접속합니다.

 

http://closure-compiler.appspot.com/home

 

 

첫 번째 방법은 좌측 하단의 텍스트 에리어에 코드를 입력하고, 컴파일 버튼을 누르면 오른쪽에 컴파일된 코드가 보여 지고, 기본적으로 default.js 파일로 다운로드 가능 합니다.

 

파일 이름을 변경하려면 아래 주석 부푼의 파일명을 수정하여 컴파일 하면 됩니다.

 

// @output_file_name default.js

 

두 번째 방법은 Add a URL 에 js파일의 url 을 입력하고 Add 버튼을 눌러 추가 한 다음, Compile 버튼을 눌러 컴 파일 할 수 있습니다. 이 때 파일을 여러개 추가하는 것이 가능합니다.

 

컴파일에 사용되는 옵션에 대해서 알아보겠습니다.

 

* 최적화 옵션(Optimization)

 

- Whitespace only : 주석을 제거하고, 줄 바꿈, 불필요한 공간(괄호 및 세미콜론 등), 기타 공백들을 제거합니다. 원본과 동일한 기능을 가지며, 세 가지 최적화 수준에서 압축율이 가장 작습니다.

 

- Simple : Whitespace only 와 같은 수준의 최적화를 수행합니다. 거기에 더해 로컬 변수 및 함수 파라미터명을 짧은 이름으로 변경합니다. 이를 통해 더 높은 압축율를 보입니다. 이 최적화 수준이 기본값입니다.

 

- Advance : Simple 최적화에 더해 더 많은 최적화를 수행합니다. 전역 변수 이름 및 함수 이름을 변경합니다. 이로인해 컴파일 되지 않은 코드에서는 작동을 하지 않을 수 있습니다. 전역변수 이름과 함수 이름이 변경되므로 외부에서 참조 할 수 없게 되는 것입니다. 이 이외에도 데드 코드의 제거, 함수의 인라인 처리 등을 수행합니다.

 

※ 참고

- 데드 코드는 논리적으로 실행되지 않는 코드를 말합니다. 예를 들면

 

var flag = true;
if(flag) {
	alert("true");
} else {
	alert("false");
}

 

위의 코드는

 

alert("true");

 

한 줄과 동등합니다. 이러한 논리적인 오류를 자동으로 찾아서 제거해 줍니다.

 

- 함수 인라인 처리의 예는

 

function hello(name) {
	alert('Hello, ' + name);
}
hello('New user');

 

위의 코드는

 

alert('Hello, New user');

 

로 치환 해 버립니다.

 

* 포맷팅 옵션(Formatting)

 

- Pretty print : 들여쓰기와 줄 바꿈을 합니다. 체크하지 않으면 한줄로 출력됩니다.

 

- Print input delimiter : 추가된 파일들과 입력된 스크립트는 컴파일시 하나의 파일로 컴파일 됩니다. 이때 각각에 대한 입력 분리자를 출력합니다.

 

 

자바 애플리케이션으로 실행하는 방법 입니다. 다음과 같이 실행합니다.

 

java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

 

사용되는 옵션은 다음과 같습니다. 최적화 레벨 : WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, ADVANCED_OPTIMIZATIONS

 

java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js hello.js

 

이것으로 Closeure Compiler 의 사용법을 알아보았습니다. RESTful API 를 사용하는 방법은 많이 쓰일것 같지 않아서 제외 했습니다. 이 방법을 사용하면 Closure Compiler 기능을 제공하는 홈페이지를 만들거나, Python 등으로 애플리케이션을 만들어 서비스 하는것도 가능합니다.