자바스크립트 압축툴 소개 및 사용법

자바스크립트 압축툴 소개 및 사용법

자바스크립트 배포 전 패키징 과정에서 빼놓을 수 없는 작업이 작성된 코드의 압축작업입니다.

아래는 현존하는 자바스크립트 압출툴 중 가장 널리 쓰이고 있는 툴인 JSMIN, Packer에 대해 알아보도록 하겠습니다.

1. JSMin

JSMin의 개념은 자바스크립트 코드를 한 블록씩 들여다보면서 전적으로 어떤 기능을 수행하는 코드만 남기고 다른
불필요한 문자(탭, 줄 끝 문자, 모든 주석)는 모두 제거합니다.

아래는 압축 전/후 코드 상태입니다.

압축전: (jsmin_test.js(294 bytes))

1. var Priviledge = (function(){
2.  
3.     // private
4.     var p1 = 'p1';
5.  
6.     function t(){
7.         return this;
8.     };
9.  
10.     t.prototype.get = function(){
11.         return p1;
12.     };
13.  
14.     return t;
15.  
16. })();
17.  
18.  
19. alert(new Priviledge().get());

압축후: (jsmin_test.min.js(151 bytes))

1. var Priviledge=(function(){var p1='p1';function t(){return this;};t.prototype.get=function(){return p1;};return t;})();alert(new Priviledge().get());

- 사용법:

사이트 URL: http://www.crockford.com/javascript/jsmin.html 
툴 URL:http://www.crockford.com/javascript/jsmin.zip

2. Packer

딘 에드워즈가 개발한 Packer는 현존하는 자바스크립트 압축기 중 가장 강력한 성능을 보여주는 압축기이며, JSMIN 과
다르게 base64를 통한 압축 및 지역변수 길이를 짧게 유지시켜 용량을 줄일 수 있는 옵션도 제공합니다.

아래는 압축 전/후 코드 상태입니다.

압축전: (294 bytes)

1. var Priviledge = (function(){
2.  
3.     // private
4.     var p1 = 'p1';
5.  
6.     function t(){
7.         return this;
8.     };
9.  
10.     t.prototype.get = function(){
11.         return p1;
12.     };
13.  
14.     return t;
15.  
16. })();
17.  
18.  
19. alert(new Priviledge().get());

압축후: (144 bytes)

1. var Priviledge=(function(){var a='p1';function t(){return this};t.prototype.get=function(){return a};return t})();alert(new Priviledge().get());

사이트 URL: http://dean.edwards.name/packer/