The Mozilla Foundation

Mozilla WebDevブログに「From 80 Seconds to 6: Optimizing Our Asset Compression」として、JavaScript・CSS・画像の連結およびミニファイ処理にかかる時間を、80秒～160秒レベルから6秒まで短縮させたときのテクニックが掲載されている。実用的な資料として参考になる。

現在、「Add-ons for Firefox」はCDNを活用してリソースを提供しているが、こうなる前はキャッシュ効果を最大限に発揮させるためにJavaScript・CSS・画像をファイルへ連結してミニファイ処理を実施して使っていたという。このリソースの生成には80秒から160秒かかっていたが、処理を工夫することで最終的に6秒にまで短縮を実現したと説明がある。

ここで紹介されている高速化テクニックをまとめると次の通り。

  1. これまではYUICompressorを採用していたが、YUICompressorでは処理が遅い。この部分を、JavaScriptに対してはUglifyJSを、CSSに対してはClean-cssを使うように変更。この変更だけで43秒分の短縮を実現。
  2. ファイルハッシュ値を手元に保持するように変更。この変更で2秒の高速化。
  3. 画像ハッシュ値に関しては、Gitコミットではなくファイルハッシュを使うことで12秒分の短縮を実現。
  4. すべてのファイルをミニファイするのではなく、変更されたファイルのみをミニファイするように変更。この変更で17秒分の短縮を実現。

CDNが利用できる場合にはこうしたテクニックを駆使する必要性は低くなるが、そうでない場合には製作時のビルド高速化テクニックとして参考になる。特にYUICompressorではなく、UglifyJSおよびClean-cssを使うことでビルド時間を高速化するという手法は、効果の高い方法として検討の価値がある。