开发中样式表的渲染速度非常慢

Question

每当我更改任何 css 文件时，加载视图最多需要 20 秒，而如果我只更改 html，则只需要几秒钟。我正在使用 rails 4.2.2，带有 puma 服务器并且在我的 development.rb 文件中有 config.assets.debug = false。看日志，大部分时间都花在了这里：

  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是

<!--[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

Rails 4 使用资产管道。
资产（样式表、js（或咖啡）脚本、图片）的每个文件名都由内容的哈希修改，即使在开发中也是如此。
每当您更改任何资产时，都必须重新计算此哈希值。

20秒好像有点长，不过看你的资产可能在正常范围内。

Answer 2

此 Matt Brictson post 提供了一种改善页面重新加载时间的好方法，尤其是在您使用 sass 时。我最终做的如下：

我首先消除了使用 compass 的需要，将我所有的罗盘呼叫替换为 autoprefixer gem。这产生了显着的效果，将我的加载时间减少到大约 8 秒。

Brictson 建议用旧式链轮 //= require 命令替换大多数 @import 命令，但这需要相当多的重新布线。相反，我尝试了 sassc-rails gem which is meant to reduce sass compilation times by a factor of four. However, I hit an issue with sassc-rails。当这个问题解决后，我可能会使用这个 gem.

接下来我开始使用 guard 和 livereload，如 Brictson 所述。这意味着现在更改我的 html 负载大约需要 4 秒，更改 sass 通常不到一秒。

开发中样式表的渲染速度非常慢

Very slow rendering of stylesheets in development

css

ruby-on-rails

puma