ファイルを直接加工まとめ背景adiaryでは、UIアイコン(このサイトだとページ送りやタグ一覧に出ている▼等)を色指定に基づいて動的にロードしています。仕組みとしては、予め128種類の色の異なる画像アイコンを用意して、指定色にもっとも近い色をロードするという感じになっていますが、いくつか問題があります。画像ファイルを増やすには限界があり近似色になってしまう。1KBにも満たないような小さなファイルをわざわざ別ファイルとしてロードさせるのは嫌。*1色が固定で良いなら、base64で埋め込むだけの話なのですが......。{background-image:url('data:image/png;base64,XXXX----XXX=');}adiaryはテーマの色をユーザーが自由に変更できるという素敵な機能が付いておりまして、そういうわけにも行きません......。Webの表示速度を上げるためにも、ロードファイル数は極力少ないほうが良いわけです。したかったときに苦戦したメモ。Compressorをインストールして、圧縮してみたのですが、謎のエラーが出て困ってしまいました。CompressorはES6(let/const)に対応していないようです。Compressorを探してみました。用はない色々調べてみてもNode.js関連情報しか出てきません。「Node.js」に興味はなく、純粋にJavaScriptを圧縮したいだけなのに......。路頭に迷っていたのですが、Uglify-jsというNode.js関連ツールを使うことで、Node.jsとは関係なく単にJavaScriptを圧縮できることがわかりました。Wabpackというツールもあるのですが、軽く調べた感じではNode.js専用ツールっぽい感じで、単なるJavaScriptの圧縮ツールとしては使いにくそうでした。(Ver3)」でもES6には対応していません。Uglify-jsからフォークされた「Uglify-es」というツールを使います。インストールする必要があります。使用できるようになったので、Uglify-esを導入します。uglify-esMakefileUglify-js@2、Uglify-js@3、Uglify-esでみんなコマンドラインオプションが違うので、情報を探す際はご注意ください。Uglify-esのマニュアルはここです参考までに作成したMakefileを晒しておきます。$(MAP_FILE)-cソースファイルを圧縮します-mMangleします。これをつけたほうが圧縮率が高くなります。includeSources,filenamemapファイルを作成します。'/^!/'「!」マークで始まるコメント(ライセンスコメント)を残します。pluginで実現しました。等のマウスイベントが発生してくれますが、長く触っているとマウスイベントは発生しないようです。以下のように実装しました。