개발자포럼

개발관련 이슈 및 팁을 공유해보세요.

프론트엔드

프론트엔드 개발에 대한 주제포럼입니다.

#자바스크립트 코드 압축하기

자바스크립트나 CSS를 개발할때, 코드를 보기 좋게 만들다보면, 줄바꿈이나 탭, 그리고 로컬변수들의 명이 길어지게 되어 있죠.

이 상태로 배포하거나 서비스에 사용해도 되지만, 불필요한 트래픽을 낭비하게 됩니다.


이 때 구글에서 제공하는 툴을 사용하면 줄바꿈이나 탭, 그리고 주석을 모두 제거해주고 로컬변수들의 이름을 짧게 변경해줍니다.

또한 불필요한 구문들은 알아서 삭제시켜주기도 합니다.




변환하기전 (불필요한 구문을 잔뜩 넣어두었습니다.)


var globalVars = {};
function helloWorld() {
  var hello = "Hello";
  var world = "World";
  console.log(hello+" "+world);
}


function add(number1, number2) {
  var sum = number1 + number2;
  return sum;
}


function printHelloWorld() {
  helloWorld();
}


변환한 후


var globalVars={};function helloWorld(){console.log("Hello World")}function add(a,b){return a+b}function printHelloWorld(){helloWorld()};


쓸데없는 구문 hellWorld 함수내의 불필요한 변수들은 모두 제거되었습니다. 하지만 실행결과는 동일하죠. (우앙굿)

그 외에 호출할때 필요한 함수명이나, 변수명들은 모두 그대로 유지하되, 함수내의 변수(호출할때 쓰지 않는)들은 모두 짧게 변했습니다.


간단한 소스라서 압출률이 별로지만, 복잡한 코드일수록 압축률이 올라가 대역폭 감소에 도움을 줍니다.

그리고 이렇게 압축된 소스들은 다른 사람들이 보고 수정하기도 힘들다는 부가적인 장점도 생깁니다.


어쨋든, 웹상에서 간단하게 자바스크립트 소스를 압축하고자 할때 이용하시면 유용할 듯 합니다.


해당 서비스의 주소는 http://closure-compiler.appspot.com 입니다.

알쯔
LV.12