PERSON LINK BLOG

Web技術

レガシーブラウザ対応が辛過ぎてJavaScriptコードを手軽に圧縮するツールを試してみた

LINEで送る
Pocket

top_hikaru_js_20150527

今回もフロントエンドネタでございます。様々な新しい技術が確立されていく中であえて「温故知新」を唱え古きをたずねてみようかなと思います。

社内でGoogleよりも検索性能が高いと噂されているらしい変態エンジニアこと田中です。

前置き

最近では主に広告配信に関わるフロントエンドエンジニアとして仕事に携わる機会が多いのですが、とにかく広告のフロントは制限が多くて大変です。

メディアの邪魔をしてはいけませんしきちんと表示が出来ないと収益に直結してしまいます。その分頑張りもお金として見えるのでそれは楽しいところでもあります。

そんな中で「リッチAD」や「ネイティブAD」と言われる「画像やテキストを表示するだけ」の広告ではない見せ方が流行ってきました。

フロントエンドエンジニアが日々Styleを充てたりアニメーションを付けたりしているわけですが、そんな中でも通信や挙動による表示の遅延を無くす努力を要求されます。

コードサイズの問題でライブラリーが使えないという制約を受けつつ、レガシーコードにまみれて戦う日々で頼りになるのは「コード圧縮ツール」です。

もちろんロジックの検討を含めチューニングは日々するのですが、最終的にはコードを圧縮するオプティマイザーの性能が大事なのかなと思う今日この頃なのです。

というわけで、今回は「gulp」で使えるJavaScriptの圧縮ツールを試してみました。

使用ツール

使ってみた圧縮ツールは以下のの3つです。

タスクを作ってみた

論よりコード、というわけでタスクを作ってみました。

https://github.com/htanaka0828/javascript_minify_test

今回題材にしたのは、以前社内勉強会用に作った「宝探しゲーム」のコードです。

ネストされた配列から特定の文字列の数を出力するだけの簡単なお仕事です。

出題用のコードと回答用のコードをそれぞれ別ファイルで作り、一緒に圧縮した時の挙動と圧縮率を比べようという魂胆でございます。

圧縮ツールの解説

実際に作ってみたサンプルがこちらで動いています。

http://htanaka0828.github.io/javascript_minify_test/htdocs/

それぞれのリンク先に行っていただけると各圧縮ツールで圧縮したコードが動いています。
※ かなり重たい処理を実行しているので力のあるマシンで実行して下さい。

gulp-closure-compiler

色々と設定が厄介で高圧縮設定にするためには「bower」で「closure-compiler」を取って来ないといけないとか、JavaScriptのコードとして「closure-library」を読み込んであげないとファイルの結合が面倒とか、慣れていないとはまりがちな所があります。

その代わり三つの中で圧縮率は一番良いですね。

他の2選手が1KBオーバーなのに対して「gulp-closure-compiler」はわずか0.626KBです。

gulp-compressor

『「gulp-compressor」は「YuiCompressor」と同じ設定を使えるよ』と書いてありますが、HTMLもCSSもJavaScriptも全部これひとつで圧縮出来ちゃうすごい奴です。

その代わり、ことJavaScriptに限定してしまうと今回の3選手の中では1.193KBと一番圧縮率が低かったようです。

gulp-uglify

そしてタスクランナーで「gulp」を採用しているプロジェクトで圧倒的人気を誇っている(気がする)のが「gulp-uglify」です。

圧縮率では「gulp-closure-compiler」には及びませんでしたが、設定をいじったりする手間も無くかつ程よい圧縮率を実現してくれています。

今回はあえてロジックの最適化や関数内関数(クロージャ)を意識しないで書いていますが、この辺りを意識して書ければかなりの力を発揮してくれます。

おわり

そんなこんなで圧縮ツールも色々出てきていますので、ちょっとしたScriptを書いた時や辛い思い出は手軽に圧縮してしまいたいものですね。

田中光

田中光

パーソンリンクのおっきいメガネ。飲んだ勢いで葛山、根本に誘われノリでパーソンリンクに入社。