Closure Tools — Google Developersで公開されているClojure Compilerを使うと、JavaScriptから余計な空白やコメントを簡単に取り除くことができます。

サイトからcompiler-latest.zipをダウンロードして展開するとcompiler.jarが手に入るので、それを下記のようにして実行します。sample7.jsをコンパイルしてsample7-compiled.jsを生成しています。

$ java -jar compiler.jar --js sample7.js --js_output_file sample7-compiled.js

ここで、sample7.jsは次の内容です。

// サンプル
var INTERVAL=1000;
var COUNT_MAX=30;

// HTML要素
var target1 = document.getElementById("target1");
var target2 = document.getElementById("target2");
var target3 = document.getElementById("target3");
var current_width2 = 0;
var current_width3 = 0;
var target2_timer_id = 0;
var target3_timer_id = 0;

/**
 * ログ用関数
 */
function log(message) {
  document.getElementById('log').innerHTML = message;
}

/**
 * runner停止判定用変数
 */
var cnt=0;

/**
 * setIntervalで定期的に呼ばれる処理
 */
function runner(time_value) {
  if (cnt > COUNT_MAX) {
    clearInterval(id);
    return;
  }
  if (cnt == 5) {
    var target2_timer_id = setInterval(function() {
      current_width2 += 20;
      target2.style.width = current_width2 + 'px';
      if (current_width2 > 400) {
          clearInterval(target2_timer_id);
      }
    }, INTERVAL/2);
  }
  if (cnt == 10) {
    var target3_timer_id = setInterval(function() {
      current_width3 += 20;
      target3.style.width = current_width3 + 'px';
      if (current_width3 > 800) {
          clearInterval(target3_timer_id);
      }
    }, INTERVAL/10);
  }
  var v = cnt + ':' + time_value;
  target1.innerHTML = v;
  cnt++;
}

/**
 * メイン処理の実行
 */
var id = setInterval(function() {
    var time_value = (new Date()).getTime();
    runner(time_value);
  }, INTERVAL);

これが、sample7-compiled.jsのようになります。ものすごく圧縮されていることがわかります。

var INTERVAL=1E3,COUNT_MAX=30,target1=document.getElementById("target1"),target2=document.getElementById("target2"),target3=document.getElementById("target3"),current_width2=0,current_width3=0,target2_timer_id=0,target3_timer_id=0;function log(a){document.getElementById("log").innerHTML=a}var cnt=0;
function runner(a){if(cnt>COUNT_MAX)clearInterval(id);else{if(5==cnt)var b=setInterval(function(){current_width2+=20;target2.style.width=current_width2+"px";400<current_width2&&clearInterval(b)},INTERVAL/2);if(10==cnt)var c=setInterval(function(){current_width3+=20;target3.style.width=current_width3+"px";800<current_width3&&clearInterval(c)},INTERVAL/10);target1.innerHTML=cnt+":"+a;cnt++}}var id=setInterval(function(){var a=(new Date).getTime();runner(a)},INTERVAL);

「Closure Compiler Service」へアクセスすれば、Webブラウザからも使えます。

JavaScriptについては、下記の書籍の参考になるでしょう。

• JavaScriptプログラミング入門 第2版
• JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技