この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
UglifyJSとは
高機能なJavaScript用の圧縮・最適化ツールです。 コンソール上でコマンドとして実行することもできますし、apiを呼び出してjs内で使用することもできます。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.4
- Node.js : v0.8.15
- npm : 1.1.66
npmを使用してUglifyJSをインストールします。 このモジュールはグローバルオプションをつけてインストールしましょう。
% npm install -g uglify-js
コマンドから圧縮を実行
uglifyjsがインストールできたら、圧縮をためしてみましょう。 とりあえず簡単なjsファイルを作成します。 jsファイルでは配列を作成してそれを全部合計し、console.logで表示します。
function sum(array) {
var result = 0;
for(var i in array) {
result += array[i];
}
return result;
}
var array = new Array(1,2,3,4,5);
console.log("result=", sum(array));
jsファイルができたら、uglifyjsコマンドを使って圧縮してみます。 -oオプションで出力ファイル名、--source-mapオプションでソースマップを指定しています。 ソースマップとは、元のソースと生成されたコードの対応情報を持ったファイルのことです。 このファイルがある場合、ブラウザのデバッガでは圧縮されたファイルでなく、元のファイルを見ながら処理を行うことがきるようになります。
% uglifyjs -c -o ./app.min.js --source-map ./app.js.map ./app.js
コマンド終了後、圧縮されたapp.min.jsファイルとそのソースマップであるapp.js.mapファイルが生成されます。
最後に生成されたjsを使用するhtmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="app.min.js"></script>
<title>hello uglifyjs</title>
</head>
<body>
hello uglifyjs
</body>
</html>
では、動作を確認してみましょう。今回、ブラウザはChromeを使用しています。 画面を開く前に、表示→開発・管理→デベロッパーツールを選択し、設定アイコン(歯車のやつ)をクリックし、 次のように「Enable Source maps」を有効化しておきます。
index.htmlをブラウザで開いて、デベロッパーツールでソースを見てください。 app.min.jsの元ソースである、app.jsも見ることができます。 app.jsにブレークポイントを設定すれば、ちゃんとステップ実行もできるようになっています。
APIから圧縮実行
さきほどはコマンドから圧縮を実行しましたが、APIを使用してプログラムからuglifyjsを使用することもできます。 下記のようなminify.jsを作成し、実行してみましょう。
//minify.js
var UglifyJS = require("uglify-js");
var result = UglifyJS.minify("./app.js", {
outSourceMap: "app.js.map"
});
console.log(result.code);
console.log(result.map);
このjsをnodeで実行すると、コンソールに圧縮した結果とソースマップの文字列が表示されます。 ファイルに出力すれば、さきほどと同じようにhtmlで使用することもできます。
% node minify.js
まとめ
今回はjavascriptの圧縮・最適化ツールであるuglify.jsについて、簡単な使い方を紹介しました。 なお、uglify.jsにはさまざまなオプションがあるので、ここなどで詳細を確認してみてください。