複数のJSファイルを結合して圧縮する

JavaScriptでMVC系フレームワークを使っていると開発しているうちにJSファイルがどんどん増えていきます。小規模のサイトならちょっとSCRIPTタグが多めになっているくらいで済みますが、規模が大きくなればそうも言ってられません。そんなわけで、今回はサイト公開用に複数のJSファイルを結合して、変数の短縮やコメントを削除してくれるUglifyJS2を使ってみることにしました。

本当はwebpackを利用してみたかったのですが、対応させるには作成済みのJSファイルを修正しないといけないようで、環境構築の初期の段階でやっておかないと厳しそうだったので今回はやめました。webpackはいずれ別の開発で利用しようかと思います。

さて、UglifyJSのインストールですが、下記のように行います。

npm install uglify-js -g

-gはグローバル版。プロジェクト単位でインストールしたい場合は省きます。

npmはNode.jsを入れておけば利用できます。

使い方は対象のディレクトリに移動後、以下のようなコマンドを実行します。

uglifyjs app.js controller.js -o bundle.min.js -c -m

実際にコードを記述して、JSファイルを圧縮してみます。

app.js

/**
 * AngularJSモジュール
 */
var myApp = angular
    .module('app', [
        'ngAnimate',
        'ngCookies',
        'ngResource',
        'ngSanitize'
    ]);

controller.js

/**
 * コントローラー
 */
myApp.controller('MainCtrl', function ($scope) {
    // 警告
    var alertMsg = "hoge";
    alert(alertMsg);
});

上記のファイルを実際に結合・圧縮してみると出力されたファイル「bundle.min.js」は以下のようになります。

var myApp=angular.module("app",["ngAnimate","ngCookies","ngResource","ngSanitize"]);myApp.controller("MainCtrl",function(n){var a="hoge";alert(a)});

見ての通り２つのファイルが結合されていてコメントや改行がちゃんと削除されています。

ただ、今回の場合はこれだとちょっと問題がありました。

よくAngularJSを利用しているので上記のテストコードもAngularJSで行っていますが、controller.jsファイルの$scopeまで短縮されてnに書き換わっています。上記のコードではAngularJSは動作しません。これを回避するにはcontrollerの書き方を変えるか変数の短縮を行わないかのどちらかになります。

controllerの書き方を変える場合は以下のようにします。

/**
 * コントローラー
 */
myApp.controller('MainCtrl', ['$scope', function ($scope) {
    // 警告
    var alertMsg = "hoge";
    alert(alertMsg);
}]);

変数の短縮を行わない場合は、uglifyjsコマンドから-mを除外します。

uglifyjs app.js controller.js -o bundle.min.js -c

上記の-mを省いたコマンドで実行した場合、実行後の出力ファイルは以下のようになります。

var myApp=angular.module("app",["ngAnimate","ngCookies","ngResource","ngSanitize"]);myApp.controller("MainCtrl",function($scope){var alertMsg="hoge";alert(alertMsg)});

とことんファイルの容量を圧縮したいのなら、この辺を注意して開発しないといけないですね。