node.jsのいろいろなモジュール26 – UglifyJSでjsファイルの最適化

node.jsのモジュール

#Node.js

#JavaScript

中村修太

2013.03.30

この記事は公開されてから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」を有効化しておきます。
source

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で使用することもできます。