PR

最適化のレベルは3段階

 Closure Compiler Web版では@compilation_levelの指定をテキストエリア上のラジオボタンで設定できます(テキストエリアの内容は自動的に書き換えられます)。@compilation_levelとして選べるのは次の三つです。

  • WHITESPACE_ONLY:無駄な空白と改行を除去します
  • SIMPLE_OPTIMIZATIONS:上記に加え変数名の簡略などを行います
  • ADVANCED_OPTIMIZATIONS:上記に加え一時格納変数などを除去します

 ADD YOUR CODE HERE以下が実際に最適化するコードを記述する部分です。サンプルのコードは,nameという変数名で引数を受け取りalertで表示するfunctionであるhelloの定義と,functionに"New user"という引数を渡している呼び出し部です。

リスト1●原型となるコード
function hello(name) {
  alert('Hello, ' + name);
}
hello('New user');

 これをWHITESPACE_ONLYで最適化すると次のコードが生成されます。

リスト1-1●WHITESPACE_ONLYで最適化
function hello(name){alert("Hello, "+name)}hello("New user");

 改行およびインデントが無くなっています。1行にまとめているので行末にあった「;(セミコロン)」も一つだけになります。

 続いてSIMPLE_OPTIMIZATIONSで最適化すると次のように変化します。

リスト1-2●SIMPLE_OPTIMIZATIONSで最適化
function hello(a){alert("Hello, "+a)}hello("New user");

 WHITESPACE_ONLYとの差異は変数名だけです。nameという変数名が,aという1文字の変数名に変更されています。SIMPLE_OPTIMIZEがやっていることを確かめるために,ちょっとテストをしてみましょう。左側のテキストエリアの原型コードを次のように変更します。functionに二つ目の引数を追加してみました。

リスト1-3●原型となるコード(リスト1)に二つ目の引数であるxnameを追加
function hello(name,xname) {
  alert('Hello, ' + name + xname);
}
hello('New user','Trick');

 このコードを最適化すると次のようになります。

リスト1-4●リスト1-3をSIMPLE_OPTIMIZATIONSで最適化
function hello(a,b){alert("Hello, "+a+b)}hello("New user","Trick");

 追加したxnameという変数名は予想通りbに変更されています。どうやらアルファベット順に変数名を割り当てていくようです。もう一つ実験しておきましょう。今度はコード内で利用されていない変数を作って最適化します。

リスト1-5●原型となるコード(リスト1)に,コードのどこでも利用されていない引数xnameを追加
function hello(name,xname) {
  alert('Hello, ' + name);
}
hello('New user');

 このコードではfunctionの第2引数としてxnameが書かれていますが,このxnameはコードのどこでも利用されていません。最適化を行うと未使用引数が除去されていることがわかります。リスト1-4にあったbという変数はコード内に出てきません。

リスト1-6●リスト1-5をSIMPLE_OPTIMIZATIONSで最適化
function hello(a){alert("Hello, "+a)}hello("New user");

 このことから,SIMPLE_OPTIMIZATIONSは変数名を単文字化するだけではなく,コード内で使われているかどうかの確認までして最適化していることがわかります。

 SIMPLE_OPTIMIZATIONSの上のレベルであるADVANCED_OPTIMIZATIONSがどういった最適化を行うのか見てみましょう。原型となるJavaScriptコード(リスト1)をADVANCED_OPTIMIZATIONSで最適化すると生成されるコードは次のようになります。

リスト1-7●原型となるコードをADVANCED_OPTIMIZATIONSで最適化
alert("Hello, New user");

 すごいことになってしまいました。変数もfunctionも引数も消されています。「引数としてfunctionに”New user”って渡してalert出すなら,最初からこう書けばいいでしょ?」という,まさに一切の無駄を排除した最適化例です。