티스토리 툴바


블로그 이미지
카라크라스

Leon.Kim의 공부하는 블로그입니다. mail - kalaklas@gmail.com twitter - @kalaklas

Rss feed Tistory
Web/Javascript 2010/11/02 02:04

jQuery 압축

웹어플리케이션 수행시 js,css등의 리소스들이 서버로부터 클라이언트로 로드된다.
js, css전송 파일 크기가 작다, 전송 갯수 적다 == 서버 부하를 줄여준다(트래픽을 줄여준다) == 웹어플리케이션 성능이 좋아진다

따라서 js 와 css는 압축이라는 빌드 과정을 이용하여 여러개로 구성된 모듈 js, css 파일들을 하나의 파일로 구성하는
과정은 웹어플리케이션 성능을 높이는데, 큰 역할을 한다.

아래와 같은 압축 툴들이 존재한다.
  • YUI Compressor (from Yahoo)
  • JSMin (by Douglas Crockford)
  • ShrinkSafe  (from Dojo library)
  • Packer (by Dean Edwards)
     
    보통 YUI Compressor  추천된다 - Java 기반
    다양하게 이용이 가능하다
     
    1. 웹사이트 툴을 이용한 압축 
    > 아래 웹사이트로 간단하게 테스트가 가능하다.
    http://yui.2clics.net/

  • 2. Command Option 이용한 실행 
    > java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js //빌드 시스템에 결합 가능
    (내가 속한 개발팀의 경우 dojo에서 제공하는 shrinksafe를 빌드 시스템과 연동 시켜 모든 js 모듈 압축 과정을 자동화 하였다.)
  •  
  • Compressor 하는일
    공백(들여쓰기, 공백라인등), 주석제거, Obfuscating, 다수의 js 소스 파일 결합등을 대신하여 준다.
     
    주의사항 >> 예를 들어 아래와 같은 주의 사항이 필요하다.
  •  dependency 고려하여 파일 결합 순서에 유의
    소스 " ; " 무조건 붙여줘야한다. 
    var myValue = a+ ++a;  ==> var myValue = a+(++a);
     
    http://www.jslint.com/lint.html 에 크록포드님께서 언급한대로만 잘 짜면 문제없을것이다 ( 고로 >> JSLint 이용하여 JS소스 검증  압축하자.)

  • 역시나 어설픈 나의 포스팅 ㅋㅋㅋ
     
,
TOTAL 16,069 TODAY 57