compassが遅い件 vol.2
compass
,
css
,
パフォーマンスチューニング
,
開発環境
0 件のコメント
「compassが遅い件 vol.1」の続きです！
今回は、image-width/image-heightの高速化手法を記載します！
（ディレクトリ構成等々は、vol.1と同様です。
はじめに
前回はconfig.rbに追記していきましたが、今回もそうなります。この調子で追記しまくっていったら、煩雑になってしまいます。。
そこで、カスタマイズしてる部分を分離しましょう！
カスタマイズしてる部分を分離する
簡単です。$ cp -ip config.rb _config.rb⇒ 前回追記したところを全部消して、下記を追記する
$ vim config.rb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # ロードパスにカレントディレクトリを追加 | |
| $:.unshift File.dirname(__FILE__) | |
| # 独自設定の読み込み | |
| require ('_config.rb') |
$ vim _config.rb⇒ 前回追記したところのみにする
以上です。量が増えたら、機能ごとにファイル分けてもいいかも。
image-width/image-heightの高速化 事前準備
測定のために、準備していきたいと思います。1. 適当な画像を配置する
$ mkdir images⇒ このディレクトリの中に、「200px.png」を入れておく。（画像なら何でも良いです
2. scssファイルを作っておく
$ vim sass/test.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @for $i from 1 through 10000 { | |
| .test#{$i} { | |
| width: image-width("200px.png"); | |
| height: image-height("200px.png"); | |
| } | |
| } |
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に追記します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module ::Compass::SassExtensions::Functions::ImageSize | |
| @@dimensions_cached = {} | |
| def image_dimensions(image_file) | |
| if @@dimensions_cached[image_file.value].nil? | |
| options[:compass] ||= {} | |
| options[:compass][:image_dimensions] ||= {} | |
| options[:compass][:image_dimensions][image_file.value] = ImageProperties.new(image_path_for_size(image_file.value)).size | |
| @@dimensions_cached[image_file.value] = options[:compass][:image_dimensions][image_file.value] | |
| end | |
| @@dimensions_cached[image_file.value] | |
| end | |
| end |
実行してみる
$ compass compile --time --force→ 5秒も短縮！
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
しかしこの修正には問題が、、
watchオプションのときを考慮しておりません。
理想はcompileオプションのときだけにしたいけど、これもzoocompassにオプション追加して使いたい時だけ発動するようにします。
image-width/image-heightの高速化2
_config.rbの修正
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 画像生成のサイズをメモリにキャッシュさせる | |
| DEFAULT_DIMENSIONS_CACHE = false | |
| if ENV['DIMENSIONS_CACHE'] === "true" | |
| DIMENSIONS_CACHE = true | |
| elsif ENV['DIMENSIONS_CACHE'] === "false" | |
| DIMENSIONS_CACHE = false | |
| else | |
| DIMENSIONS_CACHE = DEFAULT_DIMENSIONS_CACHE | |
| end | |
| # image-width/image-heightの高速化 | |
| if DIMENSIONS_CACHE | |
| module ::Compass::SassExtensions::Functions::ImageSize | |
| @@dimensions_cached = {} | |
| def image_dimensions(image_file) | |
| if @@dimensions_cached[image_file.value].nil? | |
| options[:compass] ||= {} | |
| options[:compass][:image_dimensions] ||= {} | |
| options[:compass][:image_dimensions][image_file.value] = ImageProperties.new(image_path_for_size(image_file.value)).size | |
| @@dimensions_cached[image_file.value] = options[:compass][:image_dimensions][image_file.value] | |
| end | |
| @@dimensions_cached[image_file.value] | |
| end | |
| end | |
| end |
bin/zoocompassのcustom_optionsを修正(追記)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| custom_options = { | |
| 'compile_target' => { | |
| 'env' => 'TARGET_PATTERN', | |
| 'opt' => '--target', | |
| }, | |
| 'dimensions_cache' => { | |
| 'env' => 'DIMENSIONS_CACHE', | |
| 'opt' => '--enable-dimensions', | |
| } | |
| } |
実行してみる
$ ./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作りたいなあ。。
以上です！
登録:
コメントの投稿
(
Atom
)
0 件のコメント :
コメントを投稿