rails 3.1 asset pipeline exponentially slow with compass

[wakiki]

Using rails 3.1's new way of writing css files, I have about 30 .css.sass.erb files in my /assets/stylesheets directory

each of them uses blueprint and compass mixins like +column(x), so I have to include compass and blueprint at the top of each file.

The result is that it takes about 2-3 minutes to compile the stylesheet via sprockets the first time, and every time I change any css it takes about 12 seconds to refresh. The issue becomes exponentially worse for every new sass file I put in the directory.

Trouble is, this is the new rails pattern is it not?

Am I doing something wrong here? Can anyone help?

Cheers - Steve

gem 'rails', '3.1.0.rc6' gem 'haml', '3.1.2' gem 'haml-rails', '0.3.4' # haml gem doesn't include rails generators by default, so this gem includes it gem 'sass', '3.1.7' gem 'sass-rails', "~> 3.1.0.rc.6"

[wakiki]

Whoops forgot to include compass gem!

gem 'compass', :git => 'git://github.com/chriseppstein/compass.git', :branch => 'rails31'

[scottdavis]

rails 31 integration isn't perfect yet and we are working on it keep an eye on the main ticket https://github.com/chriseppstein/compass/issues/337

[julioprotzek]

The https://github.com/chriseppstein/compass/issues/337 topic was closed but the problem remains. Any ideas?

[leehambley]

This is a problem still for me, I'm seeing absolutely insane (2500ms) requests, more than 90% of my request time for a fairly trivial app.

[scottdavis]

im not having this problem in my rails 3.1.0 app are you using an older version of sass?

[julioprotzek]

I ended up skiping asset pipeline for this project and compiling sass with compass watch. But I was using sass version which comes with Rails 3.1.1 O.o

[leehambley]

Here's the low-down:

$ bundle show | ack '(?:rails|sass)'

• rails (3.1.0)
• sass (3.1.10)
• sass-rails (3.1.2)

I'm using :compass from @chriseppstein's master.

[leehambley]

I'm seeing ~14 seconds to compile the following:

$ ls -lr ./app/assets/stylesheets/
total 160
-rw-r--r--   1 codebeaker  staff   765B 12 Nov 11:50 screen.css.scss
drwxr-xr-x   3 codebeaker  staff   102B 14 Aug 16:54 admin
-rw-r--r--   1 codebeaker  staff   1.5K  6 Nov 14:14 _typography.scss
-rw-r--r--   1 codebeaker  staff   2.1K 10 Nov 19:36 _tipsy.css
-rw-r--r--   1 codebeaker  staff   2.4K 10 Nov 19:36 _structure.scss
-rw-r--r--   1 codebeaker  staff   1.2K 10 Nov 19:36 _shows.css.scss
-rw-r--r--   1 codebeaker  staff   230B 10 Nov 19:36 _seasons.css.scss
-rw-r--r--   1 codebeaker  staff   7.9K 20 Aug 21:35 _reset.css
-rw-r--r--   1 codebeaker  staff   479B  6 Nov 11:39 _pagination.css.scss
-rw-r--r--   1 codebeaker  staff   566B  6 Nov 11:39 _mixins.scss
-rw-r--r--   1 codebeaker  staff     0B 14 Aug 16:54 _lightbox.scss
-rw-r--r--   1 codebeaker  staff    95B  5 Nov 17:38 _imports.scss
-rw-r--r--   1 codebeaker  staff   438B 10 Nov 19:36 _images.css.scss
-rw-r--r--   1 codebeaker  staff   829B 12 Nov 12:50 _home.css.scss
-rw-r--r--   1 codebeaker  staff   300B 23 Aug 19:39 _header.scss
-rw-r--r--   1 codebeaker  staff   1.3K 10 Nov 19:36 _forms.scss
-rw-r--r--   1 codebeaker  staff   598B 10 Nov 19:36 _footer.css.scss
-rw-r--r--   1 codebeaker  staff   674B 10 Nov 19:36 _flashes.scss
-rw-r--r--   1 codebeaker  staff   418B 10 Nov 19:36 _episodes.css.scss
-rw-r--r--   1 codebeaker  staff   766B  6 Nov 01:10 _colours.scss
-rw-r--r--   1 codebeaker  staff   1.0K  6 Nov 14:25 _buttons.scss
drwxr-xr-x   5 codebeaker  staff   170B 10 Nov 21:05 ..
drwxr-xr-x  23 codebeaker  staff   782B 12 Nov 12:50 .

Using:

$ cat Gemfile.lock | ack '(?:sass|compass|bour)'
  remote: https://github.com/chriseppstein/compass.git
    compass (0.12.alpha.0.724a5dc)
      sass (~> 3.1)
    bourbon (1.1.0)
      sass (>= 3.1)
    sass (3.1.10)
    sass-rails (3.1.4)
      sass (>= 3.1.4)
  bourbon
  compass!
  sass-rails (~> 3.1)

The top of screen.css.scss looks like:

30px @ 1:1.618

 Read More:
 http://modularscale.com/scale/?px1=16&px2=30&ra1=1.618&ra2=0

----------------------*/

@import 'imports';

@import 'reset';
@import 'typography';
@import 'structure';
@import 'pagination';

@import 'flashes';
@import 'forms';
@import 'header';
@import 'footer';

@import 'home';
@import 'images';
@import 'shows';
@import 'seasons';
@import 'episodes';
@import 'tipsy';

The import.scss looks like:

@import 'compass';
@import 'bourbon';

@import 'mixins';
@import 'colours';
@import 'buttons';

[whather]

I'm also seeing really long compile times with compass and Rails 3.1. Removing compass, compile times are normal and fast. Have any improvements been made recently?

[scottdavis]

latest version of sass?

[whather]

Yeah:

Using sass-rails (3.1.5) Using sass (3.1.11) Using compass (0.12.alpha.2)

[scottdavis]

sprites?

[whather]

No sprites

[leehambley]

( +1 no sprites, for me either ) - seeing compile times of the previous example that I posted in the region of 8 seconds.

It * definitely* helped (~30%?) to kick out the initializer hack as described here: http://metaskills.net/2011/05/18/use-compass-sass-framework-files-with-the-rails-3.1-asset-pipeline/- I notice that he has updated the article recently to recommend not following his instructions.

[olivierlacan]

I was seeing this behavior without Sprites (https://github.com/rails/sass-rails/issues/36). I do not have an initializer hack.

Removing all mixins from my stylesheets reduces the slow compile issue. This issue has always been correlated with mixins (or the arguments passed to mixins).

Updating to Sass 3.1.11 and Compass 0.12.alpha.2 didn't change a thing.

Also see https://github.com/rails/sass-rails/issues/36

[scottdavis]

chris is looking into this i think he narrowed it down to a GC issue

[chriseppstein]

I don't fully understand the issue. could really use some help profiling this and finding the culprit(s). The Sass::Rails/Sprockets importer is also slow -- I can get a significant speedup (~30%) by placing it last on the loadpath.

I don't understand why GC would be so much worse in a rails process than stand alone.

[whather]

I use a bunch of mixins and imports and sometimes see sass compilation times exceeding 2.5 minutes. Please let me know if you make any improvements. Thanks!

[jtmkrueger]

+1 for this. Were using a bunch of mixins and imports and seeing times up to 25 seconds.

[leehambley]

Asto the hint about GC, any easy ways to disable GC for one localized module, or can the OP with that idea share his benchmarking code so we can reproduce?

[Papipo]

How is this coming along? I can't work on my laptop, each time I need to change my stylesheets I have to wait ages -_-

[DanielWright]

YMMV, but I've found that selectively importing specific Compass modules (e.g. @import compass/css3/inline-block), rather than simply @import compass, dramatically improves compilation time.

[scottdavis]

maybe the sass-rails importer is being slow ill have some time this weekend to slam my face into this

[leehambley]

to slam my face into this

Nice to know I'm not the only one that feels like maintaining open source isn't good for my health of beauty :-D

Lee Hambley Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Thursday, December 15, 2011 at 7:27 PM, Scott Davis wrote:

maybe the sass-rails importer is being slow ill have some time this weekend to slam my face into this

---

Reply to this email directly or view it on GitHub: https://github.com/chriseppstein/compass/issues/516#issuecomment-3166601

[scottdavis]

Its not the maintaining part (since I use it) its mostly having to integrate with other open source applications that makes me want to burn things

[whather]

Scott, yeah I have a hunch it's the sass-rails importer. Looking forward to what you find over the weekend!

[scottdavis]

anyone that wants to help out buy running a https://github.com/tmm1/perftools.rb on your rails app and emailing me the graph to me@sdavis.info would be helpful

[Papipo]

It seems that the first request to my rails application stylesheet runs pretty fast. Then I make any change to my scss manifest file, or any of the partials it imports, and the slow party begins.

[scottdavis]

can you run a perftools for me for both runs?

[Papipo]

The first one is so fast that I don't get stuff to print in the graph. I can send you the second one.

[Papipo]

Sent.

[scottdavis]

thanks

[scottdavis]

Do all of you have haml installed?

[whather]

Yep

[scottdavis]

haml seems to be secretly loading the Sass rack middleware try this in your application.rb and see if it helps

config.after_initialize do |c|
  c.middleware.delete(Sass::Plugin::Rack)
end

[scottdavis]

https://github.com/nex3/haml/issues/472

[scottdavis]

also you can just gist the text perfs https://gist.github.com/d2ee08504d4c0c77c2a1#L145

[scottdavis]

i get about a 100ms speed up doing this

    config.after_initialize do |c|
      #c.middleware.delete(Sass::Plugin::Rack)

      class Sass::Plugin::Rack
        def call(env)
          puts "moving on"
          @app.call(env)
        end
      end

    end

[scottdavis]

another perf from my app: https://gist.github.com/1484335

[scottdavis]

the Sass::Plugin::Rack call isn't the problem here and removing it is marginal performance boots at best since if it runs it just warms the sass-cache and then it hits the asset pipeline it just renders the cache out the pipeline

[scottdavis]

@Papipo whats in your Gemfile my callgraphs are looking very different

mine: http://dl.dropbox.com/u/177158/callgrinds/newscenter.gif http://dl.dropbox.com/u/177158/callgrinds/newscenter-1.gif

yours: http://dl.dropbox.com/u/177158/callgrinds/application.css.gif

[scottdavis]

in fact it looks like most of the time in yours it spends a lot time rescuing from file system objects that don't exist .. are you sure you import statements are correct and your cache_dir is set properly?

you are not using the //= require directives in sprockets are you?

it seems yours is getting caught up in here https://github.com/sstephenson/hike/blob/master/lib/hike/index.rb#L81

im curious to see what others have in their graphs

[scottdavis]

http://dl.dropbox.com/u/177158/callgrinds/admin.gif

[Papipo]

Well, as I said, the first request is very fast. Then I just comment one partial import an it becomes extremely slow.

in the sprockets part, I just require_self in the manifest file, the rest are imports of blueprint and sass mixins and my own partials. I don't think there is nothing wrong with my paths, I tried with just one partial and several compass/blueprint imports and it's sloooow.

[leehambley]

• Graph: http://cl.ly/1R3Z3v2Y1h3F0H2g3z1W
• Text: https://gist.github.com/85398f73264f0c0c2a2a

The profile options were /assets/screen.css?times=three using the Rack perftools.rb gem.

[Papipo]

Well, I think that that first fast request is not exactly correct. It might have cached the stylesheet from a previous development session. Each time I modify any of my scss files, then it gets really slow, no matter if it's the first css request to the server.

And I have detected something weird: my append-bottom calls don't appear in the compiled stylesheet, I have to add margin-bottom instead. It has nothing to do with the slowness I guess, but who knows :D

[scottdavis]

@leehambley i think you profiled a cache call remove tmp/cache and run it again

[Papipo]

Well I created a test.scss file with a single compass import (@import "compass/typography/lists";) and it took 15 seconds to process it.

[scottdavis]

im seing on average about 4000 ms in my app

[leehambley]

@scottdavis I have no ./tmp/cache - and my app is still showing:

Started GET "/assets/screen.css" for 127.0.0.1 at 2011-12-16 17:43:15 +0100
Served asset /screen.css - 304 Not Modified (5ms)

Also, the .css file isn't existing anywhere in the project, do I have to profile this in production mode? (or could I be using something out of date?)