好き勝手に・げーあにん?

ファミコンと同い年の社会人ヌルオタの日記

JavaScriptの圧縮・軽量化ツールを通すと動かなくなった時に気をつけるたった1つのこと

GoogleCloser Compilerか、YUI Compressorを使う。どっちもダメだったらあきらめる。

おわり。


以下は上記に至るまでの経緯的なもの。


JavaScriptのツールとかまったく詳しくないので、ぐぐりながらいくつか軽量化を試していたら、動かなくなるパターンのほうが多かった。

で、どこで動かなくなっているのか追っていたら、どれもこれも改行を削除するタイプの軽量化ツールで、セミコロンを打ってないと動かないパターンだった。

function hoge(){
    var a=1
    alert(a)
}
hoge()

これの単純な空白文字削除での軽量化の正しい例は

function hoge(){var a=1;alert(a)}hoge();

a=1; にセミコロンが必要なんだけど

function hoge(){var a=1 alert(a)}hoge()

↑こんな感じになってしまってダメなやつ多すぎ。

ダメなパターンになってしまうのが、packerとか、compressorのpowerful compressとか、JS MinifierのAgressiveとか、Online Javascript compressorとか。結構、はてブ数の多いツールもあるんだけどなぁ……。はてブコメに動かなくなるって書いてあるやつもあるけどw


セミコロンをいつも打ってると思ってても、1箇所でも漏れてて、その次も文があると動かなくなるからなぁ。私も基本的にはセミコロンを打ってたつもりだったんだけど、

function hoge(){
    var a = function() {
        // ごにょごにょ
    } // ここのセミコロンを打ってなかった
    alert(a);
};
hoge();

みたいな無名関数を変数に代入してるところの function の閉じ中括弧のあとのセミコロンを打ってなくて、動かなかなくなっていましたとさ。

そもそもセミコロンがなくても良い感じにしてくれるCloser CompilerYUI Compressorを使えば問題よね、という冒頭の1文の結論に達しましたとさ。めでたしめでたし。

どうしても使いたいツールがあるのに動かなくなってしまう場合は、セミコロンを確認してみるといいんじゃないでしょうかね。軽量化だけでなく難読化もしてくれる packer とか。


ちなみに、Closer CompilerのAdvancedはメソッド名の省略もするので、そのJSを呼び出しているファイルなどもまとめてCompileする必要あり。動的にevalしてたりする場合は、さすがに使えないだろうね。AdvancedじゃなくてSimple使えば良いだけなんだけども。