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のインストールはされているものとします。
- compiler.jarをダウンロードします。
- 解凍して設置する。
$ 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で確認することができます。
＃人気の記事
＃タグ
