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是

<!--[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时。我最终做的是：

我首先通过用autoprefixer gem替换所有指南针调用来消除使用compass的需要。这具有显着的效果，将我的加载时间减少到大约8秒。

Brictson建议用旧的学校链轮@import命令替换大多数//= require命令，但需要进行相当多的重新布线。相反，我尝试了sassc-rails gem，这意味着将编译时间缩短了四倍。但是，我点了issue with sassc-rails。当这个问题得到解决时，我可能会使用这个宝石。

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

Answer 2

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

20秒似乎很长，但取决于您的资产可能在正常范围内。

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

2 个答案: