compassが遅い件 vol.2

「compassが遅い件 vol.1」の続きです！

今回は、image-width/image-heightの高速化手法を記載します！
（ディレクトリ構成等々は、vol.1と同様です。

はじめに

前回はconfig.rbに追記していきましたが、今回もそうなります。

この調子で追記しまくっていったら、煩雑になってしまいます。。
そこで、カスタマイズしてる部分を分離しましょう！

カスタマイズしてる部分を分離する

簡単です。

$ cp -ip config.rb _config.rb
$ vim config.rb

⇒ 前回追記したところを全部消して、下記を追記する

$ vim _config.rb

⇒ 前回追記したところのみにする

以上です。量が増えたら、機能ごとにファイル分けてもいいかも。

image-width/image-heightの高速化 事前準備

測定のために、準備していきたいと思います。

1. 適当な画像を配置する

$ mkdir images

⇒ このディレクトリの中に、「200px.png」を入れておく。（画像なら何でも良いです

2. scssファイルを作っておく

$ vim sass/test.scss

3. コンパイルしてみる

$ compass compile --time --force
identical stylesheets/ie.css (0.0s)
identical stylesheets/print.css (0.0s)
identical stylesheets/screen.css (0.024s)
identical stylesheets/test.css (13.207s)
Compilation took 13.235s

⇒ おっそい...

※ 毎回全部コンパイルしたいとき。
スプライトも含めて全部コンパイルし直したい
→ compassの--forceオプション
cssファイルのみ全部コンパイルし直したい
→ config.rbの更新日付を新しくすると走ります。(touchしてみるとかで)

image-width/image-heightの高速化1

当たりをつけたのは、この辺り。
https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/image_size.rb#L47-L51

毎回画像のサイズ測ってるんじゃない？ということで、一回測ったらメモリに格納しておくようにしてみます。
（もしかしたら、.sass-cacheディレクトリでいい感じキャッシュ持ってるのかもしれませんが。筆者はそこまでわかりません！

こんな感じの修正になりました。これを_config.rbに追記します。

実行してみる

$ compass compile --time --force
identical stylesheets/ie.css (0.001s)
identical stylesheets/print.css (0.001s)
identical stylesheets/screen.css (0.03s)
identical stylesheets/test.css (7.889s)
Compilation took 7.93s

→ 5秒も短縮！

しかしこの修正には問題が、、
watchオプションのときを考慮しておりません。

理想はcompileオプションのときだけにしたいけど、これもzoocompassにオプション追加して使いたい時だけ発動するようにします。

image-width/image-heightの高速化2

_config.rbの修正

bin/zoocompassのcustom_optionsを修正(追記)

実行してみる

$ ./bin/zoocompass compile --time --force --enable-dimensions true
identical stylesheets/ie.css (0.0s)
identical stylesheets/print.css (0.0s)
identical stylesheets/screen.css (0.026s)
identical stylesheets/test.css (7.758s)
Compilation took 7.787s

$ ./bin/zoocompass compile --time --force --enable-dimensions false
identical stylesheets/ie.css (0.001s)
identical stylesheets/print.css (0.0s)
identical stylesheets/screen.css (0.028s)
identical stylesheets/test.css (13.401s)
Compilation took 13.433s

$ ./bin/zoocompass compile --time --force
identical stylesheets/ie.css (0.0s)
identical stylesheets/print.css (0.0s)
identical stylesheets/screen.css (0.029s)
identical stylesheets/test.css (12.895s)
Compilation took 12.928s

うん、正しい！！

終わりに

今回は極端な例ですが、地味に効果があると思います。
高速化対応したgem作りたいなあ。。

以上です！