animate.cssを私のレイアウトファイルに追加するとdevサーバーがクロールされるまで遅くなります

Question

レイアウトファイルで使用されているapplication.scssファイルにanimate.cssを追加すると、ロード時間（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に変更した場合は、もう一度チェックしてください。あなたはapp/config/environment/development.rbで以下の行を検索した場合

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

UPDATE

---

：資産の

# 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に設定され、アセットの連結と前処理が無効になります。ページが遅い理由の1つは、特定のページに多数のアセットがあり、ブラウザが膨大な量のアセットをダウンロードしていることです。あなたがfalseに変更した場合：

config.assets.debug = false 

をすべての資産はapplication.cssとapplication.jsなどのファイルにバンドルされ、それが大幅にページの読み込みの速度が向上しますが、一方で、あなたがのために有効にデバッグモードを持っていません。資産。 （コメントをフォローアップ）

EDIT

---

それが可能だ場合、あなたが私にあなたのプロジェクトのリポジトリを送ることができる場合、私は試してみて、問題を特定できるように、 、良いだろう。私はあなたが提供した Gemfileから裸のRailsアプリを試してインストールしましたが、ブートストラップ後にアニメートをインポートする際に問題はありませんでした。

DBに200レコードをロードしました。上にfont-awesomeを追加して、ページを401ミリ秒で読み込みました。 （Google Chromeのすべての拡張機能は無効になっていました） すべてのGoogle Chrome拡張機能を有効にして、読み込み時間が2倍になりました！ ローディング時間を大幅に増やすことができる多くのHTMLコード行がありませんでしたが。

私が何を、どこを検索する場所を、あなたに役立つ洞察のカップルを与える：

私はGoogle Chromeのdevの-ツール（F12キー）を使用しています：

• あなたはキャッシュが無効になっている場合、devツールのネットワークカードをチェックインできます 。 私の場合は、無効にすると、読み込み時間がほぼ倍増します。開発ツールのタイムラインカード上の
• をクリックして..
• 、Googleの拡張機能やウィジェットをここ あなたが監視することができ、隔離し、スクリプトの読み込み、レンダリング、アイドル時間などの問題をトレース（これは ボトルネックを見つけることは非常に重要です） アプリのページ読み込みを遅くする可能性があります。 の問題を見つけようとしている間、それらを無効にすることをお勧めします。アプリケーションマニフェストファイルにanimate.scssを追加して戻る、アプリケーション、および問題へ

：

• ここでも、それはあなたがあなたのアプリケーションを持っているどのように多くのスタイルによって異なり、また、あなたに依存しますHTMLコード、たくさん。

  • これは、大きなプロジェクトでは違いがあります。 （複雑なプロジェクトがコンパイル時に急激にボトルネックになる）

  • マニフェストファイルに@importのディレクティブが必要かどうかを確認します。スプロケット指令とSassの@importは、インポートされるファイルが以前にインポートされているかどうかを検証したり、気にしたりしません。

私はそれが役に立てば幸い。