JavaScriptのgoogle-closure-compiler向けの最適化

はじめに

「速度」を優先するなら、この記事に書いてあることをすべて無視して下さい

デフォルトでは速度優先で最適化されます

インターネット読み込み速度とサイズに重点とした最適化方法を紹介します

インターネット読み込み速度の重要性

SEOに関わるだけではなく、高速化してユーザー体験を増やすだけではなく
多くのスマホの利用者のギガを削減して、料金をちょっぴり減らせるのかもしれません

ここで使うgoogle closure compilerのオプション

google-closure-compiler --compilation_level=SIMPLE_OPTIMIZATIONS --assume_function_wrapper=false --rewrite_polyfills=false \
--js=js/input1.js \
--js=js/input2.js \
--js_output_file=js/output.js \
--externs=js/externs.js

最初に externs.js

ファイル内に存在せず、外部の変数を宣言するためのものです

コメント内もしっかり書きます

/**
 * @externs
 */

/** @type {string} */
var strVar;

/** @type {integer} */
var intVar;

/** @const */
var jQuery;

同じ文字列を再利用して定義する

var str="str";
let str="str";

しただけでは、実は展開されてしまいます

そのため、以下のようにして行います

let nullstr="";
nullstr += nullstr;
let abc="abc" + nullstr;
let def="def" + nullstr;
let ghi="ghi" + nullstr;

少しでも値が動的に変化していることをコンパイラに教えます

let, const, var をいろいろな場所で定義しない

可能な限り関数の頭で定義するようにしましょう

そうすると、let + space の4文字が節約できます

関数を展開させない

デフォルトでは速度を優先してコンパイルされるため、インライン展開にて
サイズが増えることがあります

それを阻止するには、以下のように関数を記載します

/** @noinline */
function lower(str) {
	return str.toLowerCase() + nullstr;
}

@　noinline と + nullstr を加えているのが特徴です

呼び出し元が1個しかない場合は、展開させたほうのがサイズが減る場合もあります

document, window, navigator とか長いですね

let Document = document;
let Window = window;
let Navigator = navigator;

として、この大文字化したオブジェクトを使用するようにします
そうするとコンパイラにて1～2文字程度のオブジェクト名に短縮されます

jQuery用

let nullstr = "";
nullstr += nullstr;
let	body='body'	+ nullstr;
let none='none' + nullstr;
$(body).css('display', none);

とすればちゃんと動き、コード削減にもなります

無名関数の定義

以下のサンプルコードを見ていただく他ありません

(($) => {
	"use strict";
	alert("test");
})(jQuery);

setTimeout(() => {
	alert("test");
}, 99);