Edited at

圧縮を意識したJavaScript

More than 3 years have passed since last update.

javascriptのソースコードを圧縮、最適化した場合はどんな感じになるの?

圧縮、最適化を意識したコードって?

っていう話です。

簡単にできる事として、

・ローカル変数に置き換える

ことが挙げられます。


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

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


圧縮・最適化の例


例1

function show() {

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

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

これは普通ですね。

ただこれに対して即時関数を挟むと例2のようになります


例2

(function() {

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

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

minifyを活かすにはローカルスコープの活用が大事です。

ただ基本的にグローバル変数はminify以前に利用しない方がいいですね。


例3

(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もあるよ)