JavaScriptライブラリの圧縮 140Kが52Kに！
2020/04/01
Prototypeライブラリはもっとも最新のバージョンでサイズが140Kにもなります。重量級ライブラリと言われて久しいものの、scriptaculous系や自分のJSファイルなどを含めるとJSファイルだけで200Kを超える勢いであり、さすがに厳しいと思いました。そこで、今回初めてJavaScriptファイルの圧縮を行うことにしました。
ファイルの圧縮方法はpackerやYUI Compressorなど多く存在し、自分はその中でもオンラインで変換可能なpackerを利用することにしました。ただ、安全性はYUI Compressorに劣るとのこと。
方法はまず圧縮する前のJSファイルをCtrl+A+Cなどで全部コピーし、上段のフォームにペーストします。次にオプションのBase62 encodeとShrink variablesを任意で選択します。これらにチェックをつけて圧縮するとファイルを格段に軽量にできるようです。packというボタンを押すと圧縮が始まり、下段のフォームに圧縮後のコードが出てくるので、これをコピーしてJSファイルとして保存します。
ただし、あらかじめファイルに文法的なミスがないことが前提で、たとえば改行記号（セミコロン）ひとつ抜けてるだけで、エラーになってしまうということがあります。
セミコロンの要らないブロックは、if文やfor文などの制御構造文、関数定義などです。
以下のブロックは改行のセミコロンが要りません。
if {
...................
...................
}
for (var i = 0; i < 10; i++) {
...................
...................
}
function kansu(hikisu) {
...................
...................
}
しかし、変数に代入するタイプの関数や、returnの戻り値などは本来セミコロンが必要です。また通常のコードでも文末にセミコロンを忘れているとエラーになる恐れがあります。
var hensu = 10000 //普通のコードのセミコロン抜けにも注意
var kansu = function () {
...................
...................
}; //どの範囲までを代入するのか明確に示すためセミコロンが必要。
function kansu(hikisu) {
...................
...................
return {
hensu1: 100,
hensu2: 200
}; //戻り値がオブジェクトや関数など数行に渡るとセミコロンを忘れてしまいがち。
}
Prototypeライブラリを実際に圧縮してみると、果たしてセミコロン抜けなどが原因でうまくいきませんでした。JavaScriptの文法エラーを検出してくれるJSLintを利用して、10数か所のセミコロン抜けを修正するとようやくうまく圧縮できるようになりました。YUIなどライブラリによっては最初から圧縮ファイルが用意されているものもあります。また、ライブラリを圧縮すると、コメントなどに記述されているライセンスまで消えてしまいます。ライブラリによっては、ライセンスの表示を義務付けているのがあるので注意しましょう。
圧縮後の各ライブラリ
Prototype.min.js(version 1.6.1)
effects.min.js(v1.8.1)
soundmanager2.min.js(V2.95a.20090501)
Prototypeは圧縮前のサイズが140Kありましたが、オプションをフルに使用した結果、52K（！！）まで大幅な圧縮に成功。元サイズの約3分の1程度まで縮小させることができました。ただ、オプションを全く使わないと100K程度にしか圧縮できないようです。その他、scriptaculousライブラリで頻繁に使うeffect.jsが39K⇒16Kに、音楽再生用のSoundManager2.js（これも案外重いことが分かりました）が57K⇒22Kに圧縮しました。
結果、三つのファイルの合計サイズが236K⇒90K（！！）となり、100Kを下回ることに成功。
その他、基本的に10Kを下回るようなサイズのファイルは無視することにしました。あと、圧縮してからだと改変や修正が不可能になるため、自作ファイルは当然そのままにしています。
ファイル自体を圧縮する以外にサーバー側の技術（zgipなど）で圧縮する方法もあるらしくおいおい検討していきたいと思います。