[Javascript] 자바스크립트 코드 압축 (컴프레서, Compressor, compiler)

이 글은 이미 포스팅된 다른글을 복사해온 자료 입니다.

[출처] [Javascript] 자바스크립트 코드 압축 (컴프레서, Compressor, compiler)|작성자 마루아라  

1. JavaScript 최적화 도구

• JS Minifier
• JSMin
• JSLint : JavaScript Verifier
• Javascript compressor : JavaScript 압축 도구 (인코딩도 포함되고 Google처럼 파라미터 압축도 가능하다. 추천)
• CSS & JavaScript Compressor : CSS & JavaScript 압축 도구
• ShrinkSafe : JavaScript 압축 도구
• Huffman JavaScript Compression
• SOC (Safe Obfuscator/Compressor)
• ANT 프로젝트 구축으로 로컬에서 자유자제로 JavaScript 압축 : 여기
• Google closure
• http://java-applets.org/ (무료, 유료)
• http://jsutility.pjoneil.net/ (Compressor, Decompressor)

2. CSS 최적화 도구

• CSS OPTIMIZER : CSS파일의 사이즈를 압출해주는 툴
• CSS compressor : CSS 압축기
• ROBSON CSS COMPRESSOR : CSS 압축도구
• CSS DRIVE CSS COMPRESSOR : CSS 압축도구
• CSS Compressor from Lottery Post : CSS 압축기
• FLUMPCAKES CSS OPTIMIZER : CSS파일을 최적화 도구
• CSS ANALYZER : URL방식으로 CSS를 Validation
• CSS TIDY : open source 기반의 CSS parser와 optimizer
• 온라인으로도 최적화 사이트
• CLEAN CSS : CSS를 formatting하고 optimizing하는 온라인 도구
• CSSCHECK : URL기반으로 CSS파일을 기입하면 코드에 대한 피드백을 리포팅합니다. Warning과 에러 정보를 제공합니다.
• Code Beautifier (Based on CSS Tidy)
• CSS Optimizer : 다운로드 클라이언트를 사용하여 CSS를 최적화함

3. 웹 사이트 성능 개선

• CSS Sprite Generator
• 웹 성능 개발 방안

 

 

Google

홈페이지 : http://code.google.com/p/closure-compiler/

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

 

 

CompressorRater

홈페이지 : http://compressorrater.thruhere.net/

 

 

 

Fmarcia

데모 : http://fmarcia.info/jsmin/test.html

 

 

 

YUI Compressor

홈페이지 : http://developer.yahoo.com/yui/compressor/

 

YUI Compressor는 Yahoo의 UI Library 중 하나로 javascript와 css 파일 크기를 최소화 시킴으로서 js,css 파일의 다운로드 속도를 개선하게 해주는 라이브러리입니다. YUI Compressor에서 줄 수 있는 옵션들은 다음과 같습니다. 

• js/css 모두에 사용할 수 있는 글로벌 옵션들
  • -h, --help : 도움말을 출력합니다. 
    
  • --line-break <column>: 압축을 하는 경우 한 줄로 파일이 생성되게 되는데, 다음과 같은 이유로 특정  컬럼뒤에 line break를 삽입해 줍니다.
    1. 이렇게 압축된 파일은 읽기에도 불편할 뿐더러 
       
    2. 디버깅하기 어려운 문제를 가지고 있습니다. 
       
    3. 특정 소스 컨트롤 툴에서 문제가 될 수 있습니다.
  • --type <js|css>: YUI Compressor에서는 압축하는 파일의 확장자를 기반으로 js|css를 선택해서 압축하고 있습니다. 그러나, 입력 파일이 명시되지 않을 때나 확장자가 js 또는 css가 아닌 경우 사용되어야 합니다. 
    
  • --charset <charset>: 입력 파일을 읽을 때 사용되난 charset입니다. 해당 옵션이 선언되지 않은 경우에 사용되는 플랫폼의 기본 charset을 사용하며, 출력 charset에도 동일한 charset이 사용됩니다. 
    
  • -o <file>: 출력 파일을 지정합니다. 옵션이 선언되지 않은 경우 YUI Comressor의 기본 출력 폴더로 압축파일을 내보내게 됩니다. 
    
  • -v, --verbose: 압축 시 발생하는 정보성 또는 경고 메시지를 출력하게 합니다. 
    
• js에서만 사용가능한 옵션들
  • --nomunge: 공백 제거만을 사용하며 로컬의 변수들의 이름을 변경하여 크기를 줄이는 obfuscation을 사용하지 않습니다.
    
  • --preserve-semi: 불필요한 세미콜론들을 삭제하지 않고 유지시킵니다. 예를 들면 } 바로 앞에 위치한 ;을 삭제하지 않고 유지시킵니다. 
    
  • --disable-optimizations: built-in micro optimization을 사용하지 않습니다.
    

※ 2.3.1에 오면서 --warn 옵션과 --preserve-strings 옵션이 없어졌네요.

사용법

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

[options]에는 위의 옵션들 중 필요한 사항들을 입력하시면 되고, [input file]에는 압축할 파일을 입력하시면 됩니다. 출력 파일은 [input file] 뒤에 입력해 주시면 되구요. yuicompressor-x.y.z의 x.y.z는 빌드 넘버입니다. 다운 받은 jar파일의 버전에 맞게 바꿔 주시면 됩니다. 

사용 예 

C:\java -jar -jar yuicompressor-2.3.1.jar --charset utf-8 --line-break 100 -v --preserve-semi C:\sample.js -o C:\dst\sample.js

- 저의 경우 2.3.1을 다운 받고, utf-8 설정과 100 컬럼당 라인 브레이크 추가 경고문 출력, 세미콜론을 보호하는 옵션을 주었습니다.

관련자료: 

• YUI Compressor - BSD License를 사용하고 있습니다. Java 1.4 이상의 버전을 필요로 합니다.

 

 

 

==========================================================================================================================

 

 

반대로 압축된 js 파일 코드를 다시 원래대로 바꿔주는 사이트

 

Online javascript beautifier

http://www.jsbeautifier.org/

 

 

==========================================================================================================================

 

출처 : http://www.bloggingdeveloper.com/post/Closure-Compiler-vs-YUI-Compressor-Comparing-the-Javascript-Compression-Tools.aspx

 

I have written couple of articles on Google's Closure Compiler:

• Closure Compiler - Javascript Compiler by Google
• C# Wrapper for Google Closure Compiler
• Using Google Closure Compiler with PHP 5

In terms of Javascript Compression, the most widely used tools are: JSMIN, the DOJO Compressor, Dean Edwards’ Packer and YUI Compressor. The YUI Compressor is designed to be 100% safe and yield a higher compression ratio than the other tools listed above. That’s why most of the JavaScript Frameworks use YUI Compressor to minimize their Javascript code. 

On November 5th, Google announced Closure Compiler for Javascript compression. The strongest part of the Closure Compiler is that it does not only remove whitespace but also it rewrites Javascript Code to make it smaller. It also optimizes your Javascript code to perform better.

In this post, I compared the compression performance of YUI Compressor and Google Closer Compiler using thewell-known Javascript Frameworks - Mootools, JQuery and Prototype:

Comparing YUI Compressor and Closure Compiler - the values given in the chart are bytes

 

 

Comparing YUI Compressor and Closure Compiler - Compression Percentage

 

The comparison results show that Google Closure Compiler with advanced selected as compression level minimizes code size about 20-25% more than YUI Compressor by providing nearly 60% compression.

[출처] [Javascript] 자바스크립트 코드 압축 (컴프레서, Compressor, compiler)|작성자 마루아라