Question

当我将animate.css添加到我的布局文件中使用的application.scss文件时，加载时间（dev）非常慢到页面不呈现的程度。

如果我删除animate.css，那么它很快并且正常工作。

@import
  "bootstrap.scss",
  "animate.scss"

这里的问题是什么？

更新的我的gemfile按要求：

source 'https://rubygems.org'

gem 'rails', '4.2.5'
gem 'pg', '~> 0.15'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'puma'
gem 'annotate'
gem 'mailgun-ruby' #, '~>1.0.5', require: 'mailgun'
gem 'bcrypt', '~> 3.1.7'
gem 'sidekiq'
gem 'stripe'
gem "redis"
gem "config"

gem 'platform-api' # heroku
gem "aws-sdk"

gem "backport_new_renderer"

group :development, :test do
  gem 'byebug'
  gem 'rspec-rails'
  gem 'factory_girl_rails', '~> 4.5'
  gem 'shoulda'
  gem 'capybara'
  gem 'launchy'
  gem 'database_cleaner'
end

group :development do
  gem 'web-console', '~> 2.0'
  gem 'spring'
  gem 'quiet_assets'
end

group :test do
   gem 'database_cleaner'

end

Answer 1

这应该有效：

 @import
   "bootstrap",
   "animate"

或者这个：

@import "bootstrap";
@import "animate";

从导入的文件中删除.scss扩展名，因为您已在application.scss

中导入了这些扩展名

如果您将application.css重命名为application.scss，请再次检查。如果没有快速跳转到命令行就行了：

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

<强>更新

如果您在app/config/environment/development.rb中查找以下一行：

  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.

  config.assets.debug = true

默认情况下，资产调试设置为true，并禁用资产的连接和预处理。您的页面速度慢的原因之一是您的特定页面有很多资产，浏览器会下载大量的请求。如果您更改为false：

config.assets.debug = false

所有资产都将捆绑到application.css和application.js等文件中，这将显着提高页面加载的速度，但另一方面，您不会为资产启用调试模式。

编辑（跟进评论）

如果可以的话，你可以把项目的存储库发给我，这将是很好的，这样我就可以尝试找出问题所在。我尝试并安装了一个裸Rails应用程序你提供的Gemfile，我在引导后导入动画没有问题。

我在我的数据库中加载了200条记录，并在顶部添加了font-awesome，并且页面在401毫秒内加载。（已停用Google Chrome的所有扩展程序）启用所有Google Chrome扩展程序后，加载时间加倍！虽然我没有很多HTML代码行可以显着增加加载时间。

我会向您提供一些有用的见解，找到的内容和位置：

我正在使用Google Chrome开发工具（F12键）：

如果禁用缓存，您可以检查开发工具的网卡或不。在我的情况下，如果我禁用它将增加加载时间几乎翻倍。
点击开发工具的时间轴卡:(这一点非常重要瓶颈）在这里，您可以监视，隔离和跟踪脚本加载，渲染，空闲时间等问题。
Google扩展程序和小部件可能会降低您的网页加载速度应用程序。当你试图找到它时，我建议禁用它们问题。

通过将animate.scss添加到您的应用程序清单文件来回到您的应用程序和问题：

同样，这取决于您的应用程序中有多少样式，并且还取决于您的HTML代码。
- 这可以为大型项目带来改变。（更复杂的项目在编译中迅速开始出现瓶颈）
- 检查清单文件中是否有带@import的require指令。 sprocket指令以及Sass的@import不会验证，也不关心导入的文件是否曾经导入过。

我希望它有所帮助。

将animate.css添加到我的布局文件会减慢dev服务器的爬行速度

1 个答案: