Rev. 2.73

Closure Compiler는 구글에서 배포한 Closure Tools 라이브러리(Java)에 포함된 자바스크립트 최적화 도구입니다. 사용하지 않는 코드를 제거하고 변수명 함수명을 축소하고 다시쓰는 방법으로 자바스크립트의 크기를 줄여 다운로드 및 실행 속도를 높여줍니다. 구글은 이 도구를 배포함과 동시에 웹에서도 사용할 수 있도록 Closure Compiler Service를 오픈하고 누구나 사용할 수 있게 했습니다. 특히, 오픈 API를 제공하여 빌드 과정에 포함시킬 수 있도록 했습니다. xml, json, text 형식으로 컴파일 결과를 받아오고 컴파일 과정에서 발생한 경고 및 오류 그리고 통계 수치를 반환합니다. 아래는 PHP로 직접 작성해 본 코드입니다.

<?php

  function request($file) {
    $format = "json";
    $level = "SIMPLE_OPTIMIZATIONS";
    $info = "output_info=warnings&output_info=errors&output_info=statistics&output_info=compiled_code";
    $code = urlencode(file_get_contents($file));

    $ch = curl_init("http://closure-compiler.appspot.com/compile");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, "$info&output_format=$format&compilation_level=$level&js_code=$code");

    $output = curl_exec($ch);
    curl_close($ch);

    return $output;       
  }

  function compile($filename) {
    $path = "javascripts/";
    $result = request($path.$filename);
    $filename = preg_replace('/\.js$/iD', '', $filename).'.min.js';

    $decoded = json_decode($result);
    if ($decoded->compiledCode) file_put_contents($path.$filename, $decoded->compiledCode, LOCK_EX);

    return $result;
  }

  header("Content-Type: application/json; charset=utf-8");
  print compile($_POST['file']);

?>

주의해야 할 점이 몇가지 있습니다. "compilation_level" 파라미터로 압축수준을 결정할 수 있는데 "ADVANCED_OPTIMIZATIONS"으로 압축하면 전역(global)에 정의한 변수/함수명까지도 압축해 버리기 때문에 모든 자바스크립트 파일을 하나로 합칠때 사용하면 효과적입니다. 서로 다른 자바스크립트 파일간 참조가 이루어지는 상황에서 개별적으로 컴파일하는 경우 오류가 발생할 수 있다는 점 유의하시기 바랍니다. 그리고 정확히 몇회까지 제한이 걸려있는지는 알 수 없지만 서비스 API에 너무 잦은 요청을 하면 오류가 발생합니다.(한 시간정도 지나면 다시 사용할 수 있습니다.) 또한 한글로 작성된 문자들은 유니코드로 변환되는데 모두 "\ufffd"로 변환되는 버그가 있습니다. 이 버그는 파일의 주소를 직접 전달하는 "code_url" 파라미터를 사용할 때에만 발생하기 때문에 "js_code" 파라미터에 코드를 직접 넘기는 방법으로 이 버그를 우회할 수 있습니다.(단, 속도가 느려집니다.)

이전까지는 YUI Compressor를 사용했습니다. 그러나 위와 같은 API가 없어 개인이 만든 온라인 서비스를 찾아 수동으로 빌드하는 과정을 거쳤었습니다. 이제는 버튼 한번 클릭하는 것으로 모든 자바스크립트 파일이 컴파일 되도록 꾸며 놓았습니다. 더욱이 YUI Compressor 보다 압축율도 좋습니다.

Comments

Got something to add? You can just leave a comment.

  • Rhio.kim Rhio.kim

    RT 구글 JavaScript Compiler API를 활용한 JS 압축도구 PHP버젼. 멋져요!! @firejune: Closure Compiler Service API 사용해 보기 http://bit.ly/crG7vl

    from Topsy

  • pRix pRix

    확실히 뛰어난 압축율을 보여주지만 advace 모드는 조금 꺼려지더군요..
    단순 압축뿐 아니라 함수들의 재구축까지 ㅜ_ㅜ
    기존 플랫폼에 연동하여 사용해야 하는 상황에서는 GG..
    하지만 simple 모드만으로도 기존에 나온 모든 컴프레셔보다 뛰어난 압축율! 역쉬 구글~!
    개인적으로 JS압축 비교 서비스인 http://compressorrater.thruhere.net/ 요 사이트에
    Closure Compiler가 추가되길 기다리고 있습니다.

    reply edit

  • 네 압축율이 정말 좋더라고요. 근데 한글로 작성된 문자가 유니코드로 변환되면서 YUI Compressor 보다 오히려 용량이 커지는 현상도 종종 발생더라고요.

    reply edit

  • DaeHyun Kim DaeHyun Kim

    RT @firejune: Closure Compiler Service API 사용해 보기 http://firejune.com/1567

    from twitter

  • saystone saystone

    RT @firejune: Closure Compiler Service API 사용해 보기 http://firejune.com/1567

    from twitter

  • techbug 데꾸벅 techbug 데꾸벅

    RT @firejune Closure Compiler Service API 사용해 보기 http://firejune.com/1567

    from Topsy

  • 남s 남s

    질문이있는데요, java -jar compiler.jar --warning_level VERBOSE --compilation_level ADVANCED_OPTIMIZATIONS --js test.js 컴파일할때 이런 명령어 써서하는데 특정 폴더 안에 있는 모든 .js파일을 동시에 컴파일하게 할순없나요?

    reply edit

Your Reaction Time!

captcha

avatar