이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Closure Compiler Service API로 파일 압축

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

개요

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

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

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

파일 압축

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();

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

자바스크립트를 파일에 저장합니다.
파일을 웹 서버에 업로드하여 웹에서 액세스할 수 있도록 합니다.
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에 관한 자세한 내용은 고급 컴파일 및 익스텐션을 참고하세요.