Очень медленный рендеринг стилей в разработке

Question

Всякий раз, когда я меняю любой файл css, загрузка изображения занимает до 20 секунд, тогда как если я изменяю только изменение html, это занимает всего несколько секунд. Я использую rails 4.2.2 с сервером puma и имею config.assets.debug = false в моем файле development.rb. Глядя на бревне, большую часть времени провел здесь:

Rendered layouts/_stylesheets.html.erb (15.0ms) 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=2005ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=3005ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=4003ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=5003ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=6004ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=7005ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=8002ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=9005ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=10005ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=11001ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=12003ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=13005ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=14005ms state=active 
source=rack-timeout id=300494b919b8d4bc3128df494ef27e47 timeout=30000ms service=15003ms state=active 
Completed 200 OK in 15542ms (Views: 15535.4ms | ActiveRecord: 1.4ms) 

Мой applications.css.scss выглядит следующим образом:

/* 
*= require_self 
*/ 
$Tempo-green: #6dbd63; 
$site_width: 992px; 
$grid-float-breakpoint: 992px; 
$btn-default-bg: $Tempo-green; 
$btn-default-color: #fff; 
$btn-primary-bg: #6dbd63; 
$field_bg: lighten($btn-default-bg, 30%); 
$Mentor-green: #006400; 
$Mentor-grey: #E6E6E6; 
$Mentor-light-green: #AAE9AA; 
@mixin standard-text{ 
    color: #636363; 
    font-family: 'Georgia, Helvetica', sans-serif; 
    font-size: 14px; 
    line-height: 16px; 
    } 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import 'bootstrap_and_overrides'; 
@import "compass"; 
@import "compass/css3"; 
@import "flexslider.css"; 
@import "admin.css.scss"; 
@import "accounts.css.scss"; 
@import "central.css.scss"; 
@import "common.css.scss"; 
@import "custom.css.scss"; 
@import "articles.css.scss"; 
@import "graph.css.scss"; 
@import "handicaps.css.scss"; 
@import "pages.css.scss"; 
@import "jquery.countdown.css"; 
@import "setups.css.scss"; 
@import "shared.css.scss"; 
@import "landings.css.scss"; 
@import "linkages.css.scss"; 
@import "professionals.css.scss"; 
@import "pro_users.css.scss"; 
@import "subscribers.css.scss"; 
@import "reviews.css.scss"; 
@import "mental_games.css.scss"; 
@import "students.css.scss"; 
@import "morris.css"; 
@import "users.css.scss"; 
@import "print.css.scss" 

/* Остальная часть файла опущена */

Мой _layout .html.erb is

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]--> 

Что вызывает это?

Answer 1

Этот Matt Brictson post дает хороший подход к улучшению времени перезагрузки страницы, особенно если вы используете sass. То, что я закончил, выглядит следующим образом:

Сначала я исключил необходимость использования compass, заменив все мои звонки с помощью компаса autoprefixer gem. Это имело замечательный эффект, уменьшив время загрузки до 8 секунд.

Brictson предлагает заменить большинство команд @import со старыми звездочками //= require, но для этого потребуется довольно много переустановки. Вместо этого я попробовал sassc-rails gem, который предназначен для сокращения времени компиляции sass в четыре раза. Тем не менее, я ударил issue with sassc-rails. Когда эта проблема будет исправлена, я, вероятно, воспользуюсь этим камнем.

Далее я начал использовать guard и livereload, как описано Бриктсоном. Это означает, что теперь изменения в моей загрузке html примерно за 4 секунды, а изменения в sass часто составляют менее одной секунды.

Answer 2

Rails 4 использует конвейер активов.
Каждое имя файла актива (стили, сценарий js (или кофе), изображение) изменяется хешем содержимого даже в процессе разработки.
Этот хеш должен быть пересчитан всякий раз, когда вы меняете какой-либо актив.

20 секунд кажется довольно длинным, но в зависимости от ваших активов может находиться в нормальном диапазоне.