Closure-Compilerについて

Pocket
LINEで送る

自己紹介
初めまして皆様。フクロウラボの川原と申します。
エンジニア歴7か月です。前職はストッキング工場で開発を担当しておりました。
技術はTechCampでRailsを学び、JSとPHPを勉強中です。
技術ブログは初めて書きますので、お手柔らかにお願いします。
最初は最近使ったClosure-Compilerについて話していきます。
この記事はこちらの記事を参考にさせていただいています。
 
Closure-Compilerとは
Closure CompilerはGoogleが無償で公開しているJavaScriptコードの圧縮・最適化・難読化ツールです。
圧縮・最適化・難読化ツールは色々とありますが、今回の目的はGoogleのPageSpeed Insightsの点数を改善すること。
効果のほどがどの程度かわからないため、選定に迷いましたが
推奨されているし、ある程度の圧縮率があり、簡単に使えそうなClosure-Compilerを使用することにしました。

 

 どうやって使うの?
ここのページでソースコードをURLか原文を貼り付けCompileするだけ。
その際にオプションとして、圧縮率(Optimization)と出力形式(formatting)を選択することができる。

 

出力形式
pretty_printとprint_input_delimiterの二つをオプションとして付与できる。
pretty_print … 改行とインデントを付与した状態で出力される。(通常は付与されない状態)
print_input_delimiter…複数ファイルをコンパイルした場合範囲を示す文字列を出力コードに付与する。
今回は圧縮目的で使ったため、上記オプションは使用しませんでした。
 
圧縮率
3種類のモードから圧縮率を選ぶことができます。
・Whitespace only
その名の通りで、空白部分と改行を全て消してくれます。(使う機会あるんだろうか。)
・Simple
Whitespace onlyの機能に加え、動作に影響のない範囲で変数を最小の文字列に変更してくれます。
functionunusedFunction(note){
 alert(note[‘text’]);
}
 
functiondisplayNoteTitle(note){
 alert(note[‘title’]);
}
 
varflowerNote={};
flowerNote[‘title’]=”Flowers”;
displayNoteTitle(flowerNote);
上記がこのようにコンパイルされます。変数名を短くして効果を高くするようにしてあります。
functionunusedFunction(a){alert(a.text)}functiondisplayNoteTitle(a){alert(a.title)}varflowerNote={title:”Flowers”};displayNoteTitle(flowerNote);

 

・Advanced
もっとも効果の高い最適化を行ってくれます。
具体的には、コードを理解して最適化してくれます。Simpleと同様のコードを使ってコンパイルを行うとこのようになります。
alert(“Flowers”);
・関数を呼び出せない時
上記のように最適化してくれるのはありがたいでのですが、最適化されて困る場合もあります。
基本的に1度でも関数が呼ばれていれば、消えることはないのですが
ライブラリとして提供したい時、呼び出し元のファイルなど、呼び出す必要がないファイル等もあります。
そういったケースでは以下のようにすると良いです。
function unusedFunction(note) {
  alert(note[‘text’]);
}
window[‘unusedFunction’] = unusedFunction;


こうすることで
 
window.unusedFunction=function(a){alert(a.text)};
 
関数が消えずに済みます。
外部のAPIを参照にする場合
コンストラクタ関数プロトタイププロパティをエクスポートしたい場合
最適化コードを外から呼び出す場合
それぞれで手法が決まってます。
同じ説明になってしまうのでこちらの記事を読んでいただくいいかと思います。
以上になります。
全然関係ないですが、まとめるって難しい・・・
Pocket
LINEで送る