공유민 블로그

안녕하세요. 공유민입니다.

이번 포스트는 Javascript 소스 난독화와 압축에 대해 정리해보았습니다.

 압축(Minification)이란 것은 보통 자바스크립트 코딩을 할 때 가독성을 위해서 들여쓰기등 공백이 많이 들어가게 되어 있는데 이런 것을 없애고 코드의 크기를 줄여주는 것이다.

 난독화(Obfuscation)라는 것도 있는데 이것은 변수나 함수명을 이상하게 바꾸어서 코드를 읽기 어렵게 만든다.

1. JSMIN

 JSON을 창시한 더글라스 크록포드(Douglas Crockford)가 만든 JavaScript Minifier이다.

위 링크에서 실행파일을 다운로드 받고 커맨드로 실행시키면 된다.

주석 입력시 js파일 최상단에 주석이 추가된다.

2. /packer/

 Dean Edwards가 만든 자바스크립트 압축기 packer이다.

웹상에서 간단하게 사용할 수 있는 장점이 있다. Base62 암호화와 Shrink variables를 적용할 수 있다.

복호화를 할 때는 unpacker를 이용하면 된다.

3. YUI Compressor

 Yahoo User Interface Library에서 제공하는 YUI Compressor이다.  jar파일 형태로 제공되고 있고 사용하려면 자바 1.4이상이 필요하다. 위 기술을 기반으로 Rodolphe STOCLIN가 만든 YUI Compressor Online이다. 단, 한글 입력 시 깨지는 현상이 있다. 그리고 Online JavaScript/CSS Compression Using YUI Compressor는 완성도가 좋은편으로 javascript뿐만 아니라 CSS의 압축도 지원한다. 압축 후에는 용량의 변화를 표시한다.

마지막으로 이렇게 변환한 소스가 제대로 동작하는지 검증을 해야한다. 이 검증을 위해 더글라스 크록포드는 Javascript Verifier인 JSLint를 제공하고 있다.

도움이 되셨다면 공감부탁드립니다. 감사합니다.