'compressor'에 해당되는 글 1건

  1. 2007.11.27 Javascript Compress and Minify Skill - 1 (2)

Ajax 개발이 왕성해지면서 기존에 뜨거운 감자였던 웹 사이트 High Performance에 대한 관심도 또한 높아지고 있습니다.  저만 높은 건 아니죠?

수많은 JS 파일을 Minify 하는 방법 Compress 하는 방법, 서버사이드에서 G-Zip 하는 방법 등 웹 페이지를 구성하는 컴포넌트들의 최적화 Rule이 많이 소개 되고 있는데요.

이에 간단한 스킬을 공유합니다. 이미 알고 계시는 분들도 있으실 꺼구요.

없는 분들도 계시지만 이 글은 모르시는 분들을 위한 글입니다.

사용자 삽입 이미지

www.cygwin.com 에 들어가시면 윈도우를 위한 리눅스 환경을 위한 툴입니다. 쉘 스크립트의 대부분의 명령처리가 가능하구요.. 현재 1.5.24-2 버전까지 출시되어서 다양한 리눅스 API를 지공합니다.  뭐 쓸대 없는 내용은 빠르게 넘어갑니다.

 

사용자 삽입 이미지

다운로드 하시면 설치 과정을 거칩니다.  몇 개의 서버를 선택해서 다운로드 하시면 인스톨 도중 다양한 API 모듈을 직접 다운로드 하는 모습을 보실 수 있을 것입니다. 일단 다운로드가 모두 되고 설치도 완료되었다는 과정으로 넘어갑니다.

사용자 삽입 이미지

바탕화면에 이와 같은 아이콘이 생성되었을 것입니다. 실행해 주세요.


사용자 삽입 이미지

이와 같은 깜장색 Shell 이 뜹니다.  여러가지 명령어를 처봤죠. 아무것도 실행 안되는군요..

우낀게… ^-^* 라고 입력했더니 *_-; 자동으로 입력되서 나오네요.. 오오 신기해라~

 
자 지금부터 파일 합치기를 보여드리겠습니다.

사용자 삽입 이미지

Cygwin 을 설치하면 설치한 폴더에 위와 같은 폴더들이 무척 많이 생성되어있는데요.

이 중에 원하는 폴더에 합칠 파일을 넣습니다. 저는 tmp 폴더로 선택하고

몇 개의 폴더를 생성해서 그 안에서 합쳐보겠습니다.
 

사용자 삽입 이미지

여러가지 폴더를 생성했습니다. Yui compressor 도 보이는군요.. 이 부분은 기회가 된다면 뭐 해보고 왠만하면 안합니다.

 
Script.aculo.us
파일을 하나로 합쳐보겠습니다.

사용자 삽입 이미지

7개의 파일로 구성되어져 있는 script.aculo.us Ajax개발 시 UI부분을 prototype.js 를 기반으로한 프레임워크입니다. 하나로 합치기 위에서 쉘의 ‘cat’ 명령어를 사용합니다.

 

cat [합칠 파일 명 나열] > [합쳐질 파일명]

위와 같이 하면 파일이 합칠 파일 명합쳐질 파일명으로 합쳐져 생성됩니다.


cat builder.js controls.js dragdrop.js effects.js scriptaculous.js slider.js sound.js > all.js

위와 같이 하면

 

Script.aculo.us 파일들이 하나로 합쳐져 all.js 로 생성됩니다.

사용자 삽입 이미지

합쳐진 all.js 파일을 compressor로 돌립니다.


 

이 부분은 오픈된 라이브러리가 많이 있습니다.

http://javascriptcompressor.com/ 에 가면 javascript compressor 가 바로 뜹니다.

사용자 삽입 이미지

사용자 삽입 이미지

 
위와 같이 압축이 됩니다. 간단한 방법입니다. 하지만 그다지 추천하지는 않습니다. 간단히 주석과 줄바꿈을 통해서 Minify만 하시는 게 가장 좋을 것 같습니다.  좀더 효율적이 압축을 하려면 직접 Application을 만드는 것이 좋습니다.

 

실제로 얼마나 줄었는지 확인해 보겠습니다.

사용자 삽입 이미지

All.js 파일과 all_compress.js 를 비교해보시면 아실 것 입니다. 70% 정도의 압축률을 보입니다. 이는 압축률에 의해서 로딩은 평균적으로 빨라집니다. 하지만 결코 빨라지는 것은 아닙니다. 위에서 소개한 Compressor js가 로드 되면서 eval을 통해서 압축전의 소스와 동일하게 만드는 과정을 한번 더 거치기 때문에 비효율적일 수 있다는 것입니다. 100Kb 가 넘지 않는 소스들에서는 로딩속도의 차이가 거의 없습니다.

 
로딩은 클라이언트가 하고 eval 자체도 클라이언트 PC의 리소스를 사용하기 때문에 하지만 Minify Compress를 하는 목적은

 
첫째로 HTTP Request를 줄이는 목적 파일을 하나로 합치면서 총 7번을 했던 HTTP Request 1번으로 줄였습니다.

두번째로 123KB의 용량을 47KB로 줄여서 로딩속도를 빨리 하였습니다.

단점 위 같은 compress는 클라이언트 리소스를 많이 잡아먹기 때문에 높은 퍼포먼스를 내기 위해서는 두번째 방법은 효율적인 compressor로 바꿀 필요가 있습니다.

 
일단 간단하게 압축하는 방법에 대해서만 언급했구요..

 
마지막으로 한가지 팁을 더 말씀드립니다.
 

아까 위에서 우리는 cat 명령어를 통해서 여러 파일을 직접 쳐서 하나의 파일로 합쳤습니다. 아시는 분들은 벌써 아시겠지만 shell 에는 sh 라는 명령어가 있습니다.

 
일단 위의 폴더에 확장자가 sh 인 파일을 하나 생성합니다.

사용자 삽입 이미지










 
위와 같이 sh 파일에 미리 실행 명령을 입력해 놓습니다. 자주 합쳐야 하는 경우에 위와 같이 해놓고 cygwin 에서 sh join.sh 를 실행해서 쉽게 합칠 수 있습니다.

사용자 삽입 이미지

이렇게 하면 간단하게 all.js 파일이 생성됩니다.

단 유의할 점은 <script>로 로드하는 순서와 cat 을 통해서 합치는 순서는 동일해야 한다는 것입니다.

신고

'JavaScript > Technical Reports' 카테고리의 다른 글

DOM innerHTML 이 갖는 문제점?!!  (2) 2007.12.15
Javascript 클래스 인스턴스 - OOP 다지기  (0) 2007.12.09
Javascript Compress and Minify Skill - 1  (2) 2007.11.27
Kris Zyp 의 Advenced JSON  (0) 2007.11.23
Script 난독 처리!!  (0) 2007.11.22
JSON 2.0  (0) 2007.11.13
Posted by Rhio.kim