Ad Network

あわせて読みたい

  • あわせて読みたい

« 日本政府の「UFOは存在しません」発言にいちゃもんをつけてみる | Main | スライドする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 を一文字のローカル変数に置き換えてくれるので圧縮率が高くなるのである。この手の工夫は、コードのメインテナンスしやすさとのトレーオオフになることもあるのでやりすぎは必ずしも良くないが、変数名で妙な工夫をしなくて良い分、このテクニックは結構使えると思ったしだいである。

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef00e54fbeef078834

Listed below are links to weblogs that reference YUI Compressor が圧縮しやすいコードを書くテクニックに関する一考察:

» [javascript]iAnime.jsのソースが素敵に見える件 from アガテナ
ianime.jsが読みやすく今風のJavaScriptだなと思ったので自分の学習用にちょっとまとめてみた。 ianime.js 0.29 http://ianimejs.googlecode.com/svn/trunk/src/ianime029.js 1.匿名関数でグローバル変数の汚染を防ぐ (function(){ ... })(); 参考:JavaScript++かも日記:匿... [Read More]

Comments

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.