日本政府の「UFOは存在しません」発言にいちゃもんをつけてみる
スライドするUIを実現するiSlider.js

YUI Compressor が圧縮しやすいコードを書くテクニックに関する一考察

 そもそもが超軽量に作られている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

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)