圧縮を意識したJavaScript

JavaScript

Last updated at 2015-12-07Posted at 2013-07-24

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はこちら]
(https://twitter.com/takeharumikami)
[Feedlyのフォローはこちら]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

圧縮を意識したJavaScript

外部アカウント

おすすめの記事