Closure Compiler Service API로 파일 압축

클로저 컴파일러 서비스는 지원 중단되었으며 삭제될 예정입니다. 컴파일러를 로컬에서 실행하는 것이 좋습니다.

개요

API와의 통신에서는 Closure Compiler 서비스와 통신하는 방법의 기본사항을 설명했지만, 이 서비스를 사용하여 자바스크립트의 한 줄에서 주석을 제거하는 방법만 설명했습니다. 이 튜토리얼에서는 더 현실적인 개발 시나리오인 클로저 컴파일러 서비스를 사용하여 전체 자바스크립트 파일을 처리하여 상당한 크기를 줄이는 방법을 보여줍니다.

이 튜토리얼에서는 자바스크립트와 HTTP에 대한 기본 지식이 있다고 가정합니다. Python 스크립트를 사용하여 클로저 컴파일러 서비스에 자바스크립트를 제출하지만, Python에 대해 몰라도 예시를 따를 수 있습니다.

  1. 파일 압축
  2. 압축 개선
    1. 코드는 얼마나 더 작은가요?
    2. 클로저 컴파일러 서비스로 인해 프로그램이 어떻게 축소되었나요?
  3. 다음 단계

파일 압축

API와 통신의 예에서는 자바스크립트 문자열을 명령줄 스크립트로 컴파일 스크립트에 전달했습니다. 하지만 이 방법은 실제 크기의 자바스크립트 프로그램에서는 잘 작동하지 않습니다. 코드가 몇 줄보다 길어지면 자바스크립트 문자열이 빠르게 관리하기 힘들어지기 때문입니다. 규모가 큰 프로그램의 경우 code_url 요청 매개변수를 사용하여 처리할 자바스크립트 파일의 이름을 지정할 수 있습니다. code_url를 js_code와 함께 사용하거나 js_code의 대안으로 사용할 수 있습니다.

예를 들어 다음 자바스크립트 프로그램을 살펴보세요. 

/**
 * A simple script for adding a list of notes to a page. The list diplays
 * the text of each note under its title.
 */

/**
 * Creates the DOM structure for a note and adds it to the document.
 */
function makeNoteDom(noteTitle, noteContent, noteContainer) {
  // Create DOM structure to represent the note.
  var headerElement = document.createElement('div');
  var headerText = document.createTextNode(noteTitle);
  headerElement.appendChild(headerText);

  var contentElement = document.createElement('div');
  var contentText = document.createTextNode(noteContent);
  contentElement.appendChild(contentText);

  var newNote = document.createElement('div');
  newNote.appendChild(headerElement);
  newNote.appendChild(contentElement);

  // Add the note's DOM structure to the document.
  noteContainer.appendChild(newNote);
}

/**
 * Iterates over a list of note data objects and creates a DOM
 */
function makeNotes(data, noteContainer) {
  for (var i = 0; i < data.length; i++) {
    makeNoteDom(data[i].title, data[i].content, noteContainer);
  }
}

function main() {
  var noteData = [
      {title: 'Note 1', content: 'Content of Note 1'},
      {title: 'Note 2', content: 'Content of Note 2'}];
  var noteListElement = document.getElementById('notes');
  makeNotes(noteData, noteListElement);
}

main();

이 프로그램을 클로저 컴파일러 서비스에 하나의 큰 문자열보다 파일로 더 편리하게 전달할 수 있습니다. 서비스에서 파일을 처리하려면 다음 단계를 따르세요.

  1. 자바스크립트를 파일에 저장합니다.
  2. 파일을 웹 서버에 업로드하여 웹에서 액세스할 수 있도록 합니다.
  3. API와의 통신에 설명된 것처럼 Closure Compiler 서비스에 POST 요청을 전송하되 js_code 매개변수의 경우 code_url 매개변수를 대체합니다. code_url의 값은 1단계에서 만든 자바스크립트 파일의 URL이어야 합니다.

예를 들어 tutorial2.js 파일에서 이 예시의 자바스크립트를 찾을 수 있습니다. Closure Compiler 서비스 API를 사용하여 이 파일을 처리하려면 다음과 같이 Python 프로그램을 API와 통신하여 code_url를 사용하도록 변경합니다.

#!/usr/bin/python2.4

import httplib, urllib, sys

# Define the parameters for the POST request and encode them in
# a URL-safe format.

params = urllib.urlencode([
    ('code_url', sys.argv[1]), # <--- This parameter has a new name!
    ('compilation_level', 'WHITESPACE_ONLY'),
    ('output_format', 'text'),
    ('output_info', 'compiled_code'),
  ])

# Always use the following value for the Content-type header.
headers = { "Content-type": "application/x-www-form-urlencoded" }
conn = httplib.HTTPSConnection('closure-compiler.appspot.com')
conn.request('POST', '/compile', params, headers)
response = conn.getresponse()
data = response.read()
print data
conn.close()

참고: 이 예를 재현하려면 Windows 사용자가 Python을 설치해야 할 수 있습니다. Windows에서 Python을 설치하고 사용하는 방법에 대한 안내는 Python Windows FAQ를 참조하세요.

다음 명령어를 사용하여 클로저 컴파일러 서비스에 코드를 전송합니다.

$ python compile.py https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js

클로저 컴파일러 서비스는 https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js에서 파일을 검색하고 응답으로 압축된 자바스크립트를 반환합니다.

여러 출력 파일을 하나의 출력 파일로 함께 컴파일하려면 다음 예와 같이 여러 code_url 매개변수를 포함합니다. 

params = urllib.urlencode([
    # Multiple code_url parameters:
    ('code_url', 'http://yourserver.com/yourJsPart1.js'),
    ('code_url', 'http://yourserver.com/yourJsPart2.js'),
    ('compilation_level', 'WHITESPACE_ONLY'),
    ('output_format', 'text'),
    ('output_info', 'compiled_code'),
  ])

압축 개선하기

지금까지 예에서는 댓글과 공백만 삭제하는 WHITESPACE_ONLY의 compilation_level를 사용했습니다. SIMPLE_OPTIMIZATIONS 압축 수준을 사용하면 압축률을 훨씬 더 높일 수 있습니다. SIMPLE_OPTIMIZATIONS 압축을 사용하려면 compilation_level 매개변수를 SIMPLE_OPTIMIZATIONS으로 변경합니다. 

params = urllib.urlencode([
    ('code_url', sys.argv[1]),
    ('compilation_level', 'SIMPLE_OPTIMIZATIONS'),  # <--- This parameter has a new value!
    ('output_format', 'text'),
    ('output_info', 'compiled_code'),
  ])

이전과 같이 스크립트를 실행합니다. 

$ python compile.py https://closure-compiler.appspot.com/closure/compiler/samples/tutorial2.js

출력은 다음과 같습니다. 

var GLOBAL_document=document,$$PROP_appendChild="appendChild";function makeNoteDom(a,b,c){var d=GLOBAL_document.createElement("div");a=GLOBAL_document.createTextNode(a);d[$$PROP_appendChild](a);a=GLOBAL_document.createElement("div");b=GLOBAL_document.createTextNode(b);a[$$PROP_appendChild](b);b=GLOBAL_document.createElement("div");b[$$PROP_appendChild](d);b[$$PROP_appendChild](a);c[$$PROP_appendChild](b)}function makeNotes(a,b){for(var c=0;c<a.length;c++)makeNoteDom(a[c].title,a[c].content,b)}
function main(){var a=[{title:"Note 1",content:"Content of Note 1"},{title:"Note 2",content:"Content of Note 2"}],b=GLOBAL_document.getElementById("notes");makeNotes(a,b)}main();

이 코드는 소스 프로그램보다 읽기 어렵지만 크기가 작습니다.

코드의 크기가 얼마나 더 작은가요?

요청 매개변수의 output_info를 compiled_code에서 statistics로 변경하면 절약된 공간을 정확히 확인할 수 있습니다. 

Original Size: 1372
Compressed Size: 677
Compilation Time: 0

새 자바스크립트 크기는 원본 크기의 절반 미만입니다.

Closure Compiler 서비스로 인해 프로그램이 작아진 이유는 무엇인가요?

이 경우 클로저 컴파일러에서 일부 로컬 변수 이름을 변경하여 크기를 줄입니다. 예를 들어 원본 파일에는 다음 코드 줄이 포함되어 있습니다. 

var headerElement = document.createElement('div');

클로저 컴파일러는 이 문을 다음과 같이 변경합니다. 

var d=document.createElement("div");

클로저 컴파일러는 makeNoteDom 함수 어디서나 headerElement 기호를 d로 변경하므로 기능이 유지됩니다. 하지만 headerElement의 13자가 표시되는 3개 위치에서 각각 1자로 축약되었습니다. 이렇게 하면 총 36자를 절약할 수 있습니다.

SIMPLE_OPTIMIZATIONS를 사용하여 컴파일할 때 코드가 문자열 이름 (예: eval() 문)을 사용하여 로컬 변수에 액세스하지 않으면 항상 구문이 유효한 자바스크립트의 기능을 유지할 수 있습니다.

다음 단계

SIMPLE_OPTIMIZATIONS 및 서비스 사용의 기본 메커니즘에 익숙해졌다면 다음 단계는 ADVANCED_OPTIMIZATIONS 컴파일 수준에 관해 알아보는 것입니다. 이 수준은 자바스크립트가 컴파일 전과 후에 동일하게 작동하도록 하기 위해 추가 단계가 필요하지만 자바스크립트가 더 작아집니다. ADVANCED_OPTIMIZATIONS에 관한 자세한 내용은 고급 컴파일 및 익스텐션을 참고하세요.