TIM Labs

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

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...

--compilationlevel を指定しない場合はSIMPLEOPTIMIZATIONS で圧縮されます。

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

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

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

トラックバック(0)

トラックバックURL: http://labs.timedia.co.jp/mt/mt-tb.cgi/95

コメントする

このブログ記事について

このページは、yuitowestが2010年12月 3日 11:02に書いたブログ記事です。

ひとつ前のブログ記事は「S2JDBCのEnum型の変換でname()やordinal()以外の任意の値を利用したい」です。

次のブログ記事は「RAID-Z2なZFS上にFreeBSD 8.1をインストールする」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。