JavaScriptとCSSのミニファイ化について

あまプロでは市内のお持ち帰り配達お店マップを作っています。

開発が進むに連れて、JavaScriptファイルとCSSファイルとHTMLファイルが肥大化して来ました。
そこでファイルサイズを抑えるミニファイを行ったのであメログ。

CSSやJavaScriptやHTMLには可読性を上げる為にコメントやインデントを入れていますが、ブラウザで実行する際にはそれらは不要になります。
なので、サイトにリリースする際にはミニファイしてファイルサイズを小さくします。
そうすると、当然ダウンロード時間が減り、結果ウェブサイトの応答が早くなります。

CSSやJavaScriptのミニファイを行うツールがオープンソースで公開されてますので、それを使います。
HTMLのミニファイツールも有るのですが、今回は割愛。

先ず、ミニファイツールをインストールする前に、npmをインストールします。sudo apt install npm
でインストールしておきます。
aptが依存するパッケージを自動的にインストールしてくれるので便利です。

続きまして、npmでCleanCSSとUglifyESをインストールします。

npm install clean-css-cli -g

npm install uglify-es -g

基本的な使い方はこちら 

cleancss -o takeaway.min.css takeaway.css
uglifyjs -c -m -o takeaway.min.js -- takeaway.js

*.cssや*.jsがミニファイ前のファイルで、*.min.cssや*.min.jsがミニファイ後のファイルです。 

比較してみると

-rw-r--r-- 1 root root 2.5K May  9 23:35 takeaway.css
-rw-r--r-- 1 root root 1.7K May  9 23:35 takeaway.min.css

-rw-r--r-- 1 root root 5.0K May  9 23:35 takeaway.js
-rw-r--r-- 1 root root 2.8K May  9 23:35 takeaway.min.js
-rw-r--r-- 1 root root  26K May  9 23:35 takeawayLib.js
-rw-r--r-- 1 root root  12K May 10 00:14 takeawayLib.min.js

ミニファイ後はサイズが約半分になってます。

たかが半分されど半分…塵も積もれば山となります。

ミニファイ後のファイルを開いてみると改行や空白が削除された長〜い一行のファイルになっています。

CSSはこれで良いのですが、JavaScriptはこのままでは開発し難いです。

JavaScriptは開発中にブレークポイントで停止して変数をウォッチしてデバッグする事が有りますが…これ、一行のファイルだととてもデバッグし難いんです。

なので、今時のブラウザにはJavaScriptの整形機能が有ります。

ブラウザの開発ツール（Ctrl + Shift + I）のデバッガータブの下に｛ ｝のアイコンが有ります。

これを押下するとソースを整形してくれます。

整形はしてくれるんですが、ミニファイ時に難読化のオプション-mを指定しているので、変数名が一文字になって非常に理解し難いです。

これには、デバッグ時に変数名やfunction名を復元するソースマップを作成して対応します。

ソースマップはミニファイ時にuglifyjs -c -m -o takeaway.min.js --source-map "url='takeaway.min.js.map'" -- takeaway.js

のオプションを指定するだけです。 

すると、ミニファイ時にソースマップが作成されます。

-rw-r--r-- 1 root root 2.5K May  9 23:35 takeaway.css
-rw-r--r-- 1 root root 5.0K May  9 23:35 takeaway.js
-rw-r--r-- 1 root root 1.7K May  9 23:35 takeaway.min.css
-rw-r--r-- 1 root root 2.8K May  9 23:35 takeaway.min.js
-rw-r--r-- 1 root root 3.0K May  9 23:35 takeaway.min.js.map
-rw-r--r-- 1 root root  26K May  9 23:35 takeawayLib.js
-rw-r--r-- 1 root root  12K May 10 00:14 takeawayLib.min.js
-rw-r--r-- 1 root root  16K May 10 00:14 takeawayLib.min.js.map

先程と同様にブラウザの開発ツールのデバッグタブを表示すると

*.min.jsに加えて*.jsが表示され、*.jsの方は変数名やfunction名が理解し易い形式で表示されます。

開発用のdevelopブランチではJavaScriptをデバッグしますので、ソースマップ有りで。

リリース用のgh-pagesブランチではJavaScriptをデバッグしないので、ソースマップ無しで。

という風に使い分けます。

ちなみにJSONファイルは

cat data/local.json | sed -r 's/^\s+//g' | sed -z 's/[\r\n|\r|\n]//g' > data/local.min.json

でミニファイ化してます。

先頭の空白文字と改行文字を削除してるだけです。ほんまは:の前後の空白とかダブルクォートとかも削除出来るんですけど…それは出来てないです。 

JSONファイルはマップファイルが無いので、編集時には整形しないと見難いです。

その場合はjqコマンドで整形して

echo "$(cat data/local.min.json | jq .)" > data/local.min.json

戻して、整形⇔ミニファイを行ったり来たりしてます。