パソコン/プログラム編

JavaScript/CSSを圧縮してコンパクトにしてみる

Vaster2でカスタマイズしてくると、追加でいろいろな「JavaScript」や「CSS」をHTMLファイルに挿入することになる。

最初のうちはそれほど多くないし、気にならなかったのですが段々、ファイルの規模が大きくなるともっとコンパクトにしたくなりました。



JavaScriptなどはソースファイルがそのままで動作しますが、プログラムでは普通はソースコード実行コードに変換して使います。





今回はオンラインで使えるサイトを利用させてもらいます。いろいろありますが、以下は私が使いやすいなと思ったサイトです。

Closure Compiler

ここ『Closure Compiler』はJavaScriptだけを圧縮(巷では難読化とも呼ばれています)します。

設定は「Whitespace only」「Simple」「Advanced」の3種類あり初期設定はSimpleになっています。

Whitespace only

単純にスペースを省力して文字数を減らすモードで動作は先ず問題ありません。スペースがないだけなのでコードがほぼそのまま現れます。

Simple

関数名なのどの文字列などシンプルに短くして文字数を減らします。文字が変換されてしまうので意外と読みづらくなります。

Advanced

構文を解読して不要な部分は省いて圧縮します。かなり難解になり、コードを見ただけではどんな動作になっているか簡単にはわからないことが多いです。但し、動作が想定通りにならないこともあるようなので変換後は確認が必要です。


Online JavaScript/CSS/HTML Compressor

この『Online JavaScript/CSS/HTML Compressor』はJavaScriptだけでなくCSSまで圧縮してくれます。JavaScriptの圧縮レベルは「Closure Compiler」の「Simple」そうとうです。

圧縮すると少し読み込みが高速化するメリットがありますが、その他に私のように初心者が恥ずかしいJavaScriptコードを書いた時などは読みづらくしておけば目立たないかもしれません(笑)

一般に圧縮化してしまうとコードの変更が簡単にはできなくなるのでオリジナルなJavaScriptコードは別途、コピーしておいたほうがいいと思います。






実際の圧縮後の変換比較

では、実際の変換して圧縮してみます。

オリジナルなソースコードは結構な行数になっています。

(function($){

     jQuery.fn.toc = function(options) {
        var defaults = {
            startLevel: 'h2',
            listType: 'ul',
            target: 'toc'
        };
        var setting = jQuery.extend(defaults, options);

         var startLevel = setting.startLevel.substr(1, 1);
        var data = '';
        var currentLevel = 0;
        var counter = 1;

         var header = [ '.entry-content h1', '.entry-content h2', '.entry-content h3',
                       '.entry-content h4', '.entry-content h5', '.entry-content h6' ];
        var tmpArray = new Array;
        for (i=startLevel-1; i<6; i++) {
            tmpArray.push( header[i] );
        }
        var headers = tmpArray.join(',');

         $( headers, this ).each(function(){
            this.id = "chapter" + counter;
            var level = this.nodeName.substr(1, 1) - ( startLevel - 1 );

             while(currentLevel < level) {
                data += '<' + setting.listType + '>';
                currentLevel++;
            }
            while(currentLevel > level) {
                data += '</' + setting.listType + '></li>';
                currentLevel--;
            }
            if ( currentLevel == level ) {
                data += '<li>';
            }
            data += '<a href="#' + this.id + '">' + $(this).html() + "</a>";
            counter++;
        });
        while (currentLevel > 0) {
            data += '</' + setting.listType + '>';
            currentLevel--;
        }
        $("#" + setting.target).html(data);
        return this;
    };
})($) 


Closure Compilerで変換

(function(e){jQuery.fn.toc=function(a){var d=jQuery.extend({startLevel:"h2",listType:"ul",target:"toc"},a),f=d.startLevel.substr(1,1),c="",b=0,g=1;a=".entry-content h1;.entry-content h2;.entry-content h3;.entry-content h4;.entry-content h5;.entry-content h6".split(";");var h=[];for(i=f-1;6>i;i++)h.push(a[i]);a=h.join(",");for(e(a,this).each(function(){this.id="chapter"+g;for(var a=this.nodeName.substr(1,1)-(f-1);b<a;)c+="<"+d.listType+">",b++;for(;b>a;)c+="</"+d.listType+"></li>",b--;b==a&&(c+="<li>");
c+='<a href="#'+this.id+'">'+e(this).html()+"</a>";g++});0<b;)c+="</"+d.listType+">",b--;e("#"+d.target).html(c);return this}})($);

「Advanced」でも試してみましたがこの例では圧縮率は余り変わりませんでした。「Advanced」は上手く変換できればコードの読み込みが早くなるばかりでなくスクリプトの動作自体も高速になることがあるようです。

Online JavaScript/CSS/HTML Compressorで変換

!function(t){jQuery.fn.toc=function(e){var n=jQuery.extend({startLevel:"h2",listType:"ul",target:"toc"},e),r=n.startLevel.substr(1,1),h="",s=0,o=1;e=".entry-content h1;.entry-content h2;.entry-content h3;.entry-content h4;.entry-content h5;.entry-content h6".split(";");var c=[];for(i=r-1;6>i;i++)c.push(e[i]);for(e=c.join(","),t(e,this).each(function(){this.id="chapter"+o;for(var e=this.nodeName.substr(1,1)-(r-1);e>s;)h+="<"+n.listType+">",s++;for(;s>e;)h+="</"+n.listType+"></li>",s--;s==e&&(h+="<li>"),h+='<a href="#'+this.id+'">'+t(this).html()+"</a>",o++});s>0;)h+="</"+n.listType+">",s--;return t("#"+n.target).html(h),this}}($);

 微妙に文字が違いますがほぼ同じぐらいの圧縮率です。これだけでも結構、コードを分析するのは難解です。

CSSの圧縮も基本は同じでスペース関連がすっきりしてサイズダウンが見込めますが、コード自体は読みづらくなります。