圧縮を意識したJavaScript

javascriptのソースコードを圧縮、最適化した場合はどんな感じになるの？
圧縮、最適化を意識したコードって？
っていう話です。

簡単にできる事として、
・ローカル変数に置き換える
ことが挙げられます。

圧縮・最適化ツールの代表例

Closer CompilerやYUI Compressorの二つが挙げられます。

圧縮・最適化の例

例１

function show() {
  console.log('a');
}
show();

// minify
function show(){console.log("a")}show();

これは普通ですね。
ただこれに対して即時関数を挟むと例２のようになります

例２

(function() {
  function show() {
    console.log('a');
  }
  show();
})();

// minify
(function(){console.log("a")})();

minifyを活かすにはローカルスコープの活用が大事です。
ただ基本的にグローバル変数はminify以前に利用しない方がいいですね。

例３

(function() {
  var number = 5;
  console.log(number++);
  console.log(number++);
  console.log(number++);
})();

// minify
(function(){var a=5;console.log(a++);console.log(a++);console.log(a++)})();

ローカル変数は変数名が大幅に簡略化されます。

例4

ローカルスコープ内でオブジェクトのプロパティを使用する際は、
下記のようにローカル変数に代入し直してからすると、
minifyを意識した実装ができます。

function test(object) {
  console.log(object.number);
  console.log(object.number);
}

test({
  number: 5
});

// minify
function test(a){console.log(a.number);console.log(a.number)}test({number:5});

function test(object) {
  var number = object.number;
  console.log(number);
  console.log(number);
}

test({
  number: 5
});

// minify
function test(a){a=a.number;console.log(a);console.log(a)}test({number:5});

ブラウザでminifyお試し

下記でブラウザから実際にminifyを試す事ができます。
closure-compiler

外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。
Twitterはこちら
Feedlyのフォローはこちら

おすすめの記事

入門者がつまづく、thisの挙動を4種類に分けて簡単に学ぶならこれ。Apply, callの挙動までわかる。
JavaScriptの「this」は「4種類」？」

JavaScriptはオブジェクト指向？プロトタイプベースのオブジェクト指向を学ぶなら。
JavaScriptのプロトタイプからオブジェクト指向を学ぶ

関数型プログラミングを強力に後押しするライブラリ、Underscore.jsとlodashとは。
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)