YUI Compressor が圧縮しやすいコードを書くテクニックに関する一考察
2007.12.20
そもそもが超軽量に作られているiAnime.jsだが、YUI Compressorで圧縮するとどのくらいまで小さくなるものか試してみた。ianime028.js, ianime028ex.js, ibrowse010.js の三つのファイルを繋いでから圧縮すると、12739バイトが6629バイトに。約50%だ。一通りのテストをしてみたところ順調に動いているようで、やはり「安全性と圧縮率のバランスが良い」という評判は本当のようだ。
ということで、これからはバージョンアップごとにこの圧縮したバージョンもリリースすることにした。とりあえず、version 0.28 は ianime028-all.js として Google Code のダウンドーロページにアップロードしておいたので、ぜひともお試しいただきたい。
ちなみに、この過程でいくつかさらに小さくする方法を見つけたので(以下に記述)、version 0.29 では「6KByte以下に圧縮する」のに挑戦してみようと思う。
◇ ◇ ◇
YUI Compressor で圧縮したコードを見ると分かるが、ローカルでしか参照されない関数や変数名をAとかBという一文字の変数に変換して文字数を節約している。当然だがグローバル変数の場合、そんなことができないのだが、何度も参照されるグローバル変数(もしくはそのプロパティ)の値を一度ローカル変数に代入しておいて、それを使ってアクセスするようにすれば、圧縮率が高まる。
具体的には、iAnime.jsの場合だと、グローバル変数iAnimeのプロパティ"effects" (つまり"iAnime.effects")を何度も参照しているので、クロージャの内側で一度、
var iAnimeEffects = iAnime.effects;
としてそれを使う様にすれば、YUI Compressor が iAnimeEffects を一文字のローカル変数に置き換えてくれるので圧縮率が高くなるのである。この手の工夫は、コードのメインテナンスしやすさとのトレーオオフになることもあるのでやりすぎは必ずしも良くないが、変数名で妙な工夫をしなくて良い分、このテクニックは結構使えると思ったしだいである。
Comments