Profiling slow assets in development

17
votes

Every time I make a change to my SASS in development, I get 20s+ load times when loading my application.css.

I've read some other questions, and tried:

  • Setting config.assets.debug = false.
  • Changing up imports and requires (I use SASS variables)
  • Using Miniprof and its firegraph
  • Using rails-asset_profile

Here's what I read:

I've been having this issue from Rails 3.2 and now in 4.2.

I'm going crazy here. How do I find the bottleneck in this mess?

I am looking for a solution that allows me to pinpoint with precision where the time is spent and suggests ways to cut down on that compilation time.

2
ruby-on-railssassasset-pipeline
did you have a look at the browser? which asset is the slow one? – phoet
@phoet Oh, the compiled CSS file. Forgot about mentioning that. – Jonathan Allard
a simple way to that is using .css.erb files and puts statments. just to get any reference points – phoet
How are your files organised? If you use a lot if SASS @import statements, you will seriously slow things down if you have a lot of CSS code, since on every change SASS will have to recompile everything, and not just a single file. I happened to encounter this scenario earlier this week, and using require instead of @import solved this; I created a separate variables.css.sass file to store variables & mixins (which is @imported in every SASS file). – Martin Tournoij
Have you tried sassc-rails? It speeds up precompiling by x3. It's not gonna work if you are using compass though – mswiszcz

2 Answers

0
votes

There is a gem called quiet_assets that suppresses logging of assets load. In times of rails 3.x it drastically accelerated my development mode. Let me know if this does help.

0
votes

Look at sprockets source at find method in Sprockets::Manifest class. You can change it to following:

paths.each do |path|
  start = Time.now
  puts "Start #{path}"
  environment.find_all_linked_assets(path) do |asset|
    yield asset
  end
  puts "Finished: #{Time.now - start}"
end

So it will print all time required to compile each asset. Hope it'll help :)

Edit: This chunk of code is from master branch. You can view and edit your current version of sprockets by using 

bundle open sprockets

Output after changes:

$ rake assets:precompile 
Start admin.css
I, Ä2015-11-28T10:45:26.986231 #45492Ü  INFO -- : Writing /Users/sky/projects/photo_school/public/assets/admin-0e445dcfdc3bd3029943b7d3621b4156c9838eed229c3628f8c558cbb3ce1a59.css
Finished: 10.165564

EDIT: changed code a bit and changed link (yesterday put link to a wrong fork: was in a hurry, found out your question only in 15 minutes before bounty closing :)). I checked this code in my project and it works properly (the project uses version 3.3.3 of sprockets).