Makeを利用したJavaScriptファイルの結合・圧縮

ある程度の規模のJavaScriptプログラミングでは、モジュール毎に、複数のファイルに分割してプログラミングするのが普通である。これは、ファイルの大きさが適度な方が編集作業が容易なのと、モジュールの別プロジェクトへの再利用性を高めるためである。

しかし、ブラウザ・アプリケーションでは、複数ファイルを1つのファイルに結合する方が望ましい。なぜならば、複数ファイルへの分割は、サーバへの多数のHTTPコネクションの発生を意味し、応答性が低下する。そのため、例えば、Google Mapsでは、多数のコードが100kbを超える1つのJavaScriptファイルにまとめられている。

また、ユーザの利便性を高める意味では、JavaScriptファイルの圧縮も重要である。JavaScriptの文法的な意味は保存したまま、ファイルサイズを圧縮することにより、ダウンロード時間を短くできる。また、圧縮により、JavaScriptファイルの可読性が低下するので、他人がコードを読みにくくなる。

このようなJavaScriptファイルの結合・圧縮は、ユーザの利便性を高める上では重要な処理にもかかわらず、意外と実行されていない。これは、結合・圧縮が、ソースの修正毎に必要なため、手続きの面倒さが嫌われているのだと思う。

ソースの修正毎に発生する作業を自動化するにはGNU makeが便利である。例えば、次の2つのファイルtest1.js、test2.jsがあるとしよう。

//test1.js
function MyClass(){
    this.foo = function(argument1, argument2){
        var addedArgs = parseInt(argument1)+parseInt(argument2);
        return addedArgs;
    }

    var anonymousInnerFunction = function(){
        // do stuff here!
    }
}

function MyFunc(){
    // this is a top-level function
}

// we've got multiple lines of whitespace here

//test2.js
function MyClass2(){
    this.bar = function(argument1, argument2){
        var addedArgs = parseInt(argument1) * parseInt(argument2);
        return addedArgs;
    }
}

Makefileに次のように記述する。

$ cat Makefile 
SRC = test1.js test2.js
COMB = test.js
COMP = small_test.js
all: $(COMP)
$(COMB): $(SRC)
        cat $(SRC) > $(COMB)
$(COMP): $(COMB)
        java -jar custom_rhino.jar -c $(COMB) > $(COMP)

そして、makeを実行する。

$ make
cat test1.js test2.js > test.js
java -jar custom_rhino.jar -c test.js > small_test.js

この結果、small_test.jsが得られ、その内容は次となる。

function MyClass(){
this.foo=function(_1,_2){
var _3=parseInt(_1)+parseInt(_2);
return _3;
};
var _4=function(){
};
}
function MyFunc(){
}
function MyClass2(){
this.bar=function(_5,_6){
var _7=parseInt(_5)*parseInt(_6);
return _7;
};
}

2つのjsファイルが1つにファイルにまとめられ、また、ファイルサイズも549byteから238byteと、約半分にまで圧縮されている。
makeを用いる利点は、いずれかのコードが修正された場合のみ、コードが圧縮・修正される点である。同様な処理はシェルスクリプトなどでも実現できるが、標準技術であるmakeを利用した方が汎用性が高いと思う。

なお、JavaScriptファイルの圧縮にはDojo's Compressorを用いた。Makefile中のcustom_rhino.jarがそうである。Dojo's Compressorでは日本語文字列はうまく扱えないようなので、日本語文字列は別ファイルに記述する必要がある。また、Windows環境でmakeを利用するには、cygwinの導入が簡単だと思う。