Closure CompilerでJavascriptソースコードを圧縮


2010年 12月 03日

webのリッチインターフェースのUIが主流になってきた昨今、Javascriptファイルのサイズが肥大化し

リクエスト時のトラフィックもそれに応じて肥大化してきています。

webページのパフォーマンス改善のためにも読み込むJavascriptやCSSのサイズはなるべく小さくしたいものです。

そこでGoogleが公開しているClosure Compilerを使ってJavascriptを圧縮してみます。

Closure Compiler

Closure Compilerを使うにあたって選択肢は3種類あります。

  • Closure Compiler Service UI を使う
  • Closure Compiler Service API を使う
  • Closure Compiler Application を使う

Service UIを使いたい場合は Closure Compiler Serviceからweb UIを使用することができます。

Service APIを使いたい場合は Closure Compiler Service API Reference を参照してください。

今回はClosure Compiler Applicationを使います。

準備

javaのインストールはされているものとします。

  1. compiler.jarをダウンロードします。
  2. 解凍して設置する。
    $ wget http://closure-compiler.googlecode.com/files/compiler-latest.zip
    $ unzip compiler-latest.zip

使用法

まずサンプルファイルを作ります。

sample.js

function hello(msg) {                                                                                                                                                                                                 
  alert('Hello ' + msg)
}
hello('world.');

コマンドを実行

$ java -jar compiler.jar --js sample.js
function hello(a){alert("Hello "+a)}hallow("world");

実行結果が表示されました。
結果をファイルに出力したい場合は

$ java -jar compiler.jar --js sample.js --js_output_file sample.compiled.js
$ less sample.compiled.js 
function hello(a){alert("Hello "+a)}hallow("world");

複数ファイルをまとめて圧縮することも可能です。

sample2.js

function hallow(msg) {                                                                                                                                                                                                 
  alert('Hallow ' + msg)
}
hallow('world.');

コマンドを実行

$ java -jar compiler.jar --js sample.js --js sample2.js --js_output_file sample.compiled.js
$ less sample.compiled.js 
function hello(a){alert("Hello "+a)}hallow("world");function hallow(a){alert("Hallow "+a)}hallow
("world");

compilation_levelの指定

Closure Compilerはコンパイルレベルを指定することができます。

$ java -jar compiler.jar --compilation_level WHITESPACE_ONLY --js sample.js
  • WHITESPACE_ONLY
    • コメントの削除
    • 改行・不要なスペース・その他ホワイトスペースを除去
  • SIMPLE_OPTIMIZATIONS
    • コメントの削除
    • 改行・不要なスペース・その他ホワイトスペースを除去
    • function内ローカル変数とfunctionの引数の名前を短く
    • etc…
  • ADVANCED_OPTIMIZATIONS
    • コメントの削除
    • 改行・不要なスペース・その他ホワイトスペースを除去
    • function内ローカル変数とfunctionの引数の名前を短く
    • グローバル領域を含むすべてのシンボルの名前の変換
    • 使用していない変数、関数の削除
    • etc…

–compilation_level を指定しない場合はSIMPLE_OPTIMIZATIONS で圧縮されます。

コンパイルレベルでの違いのサンプルです。

sample3.js

// global variables                                                                                                                                                                                                    
var name = 'yuito';

function alert_message(name) {
  // local variables
  var prefix = 'Mr.';
  var msg = 'Hello';
  // local variables not use
  var hoge = 1;

  msg = msg + ' ';

  alert(msg + prefix + name);
}

alert_message(name);

WHITESPACE_ONLY

$ java -jar compiler.jar --js sample3.js --compilation_level WHITESPACE_ONLY
var name="yuito";function alert_message(name){var prefix="Mr.";var msg="Hello";var hoge=1;
msg=msg+" ";alert(msg+prefix+name)}alert_message(name);

SIMPLE_OPTIMIZATIONS

$ java -jar compiler.jar --js sample3.js --compilation_level SIMPLE_OPTIMIZATIONS
var name="yuito";function alert_message(b){var a="Hello";a+=" ";alert(a+"Mr."+b)}
alert_message(name);

ADVANCED_OPTIMIZATIONS

$ java -jar compiler.jar --js sample3.js --compilation_level ADVANCED_OPTIMIZATIONS
var a="Hello";a+=" ";alert(a+"Mr.yuito");

OPTIMIZATIONSレベルを使う上でのコーディングルールはここに載っています。

補足

今回は簡単な使い方を紹介しました。その他のオプションなどは

$ java -jar compiler.jar --help

で確認することができます。