アセットパイプラインのベスト・プラクティス

アセットパイプライン | Rails ガイド

アセットパイプラインについて

アセットパイプラインとは、JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど)
または圧縮して連結するためのフレームワークです
  • 関連のgem
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
  • デフォルトの圧縮方式
config.assets.css_compressor = :yui
config.assets.js_compressor = :uglifier
  • 圧縮後のファイル名とキャッシュ破棄
クエリ文字列ではなく、ファイルの内容を元にしたMD5の値を.の前に置く
↓
application-548e046cade9624f2caf2d15fc42302ff7cc09245267f16cdd3e6e7b1a8c19de.css

クエリ文字列は使わない方がよい

アセットパイプラインのベスト・プラクティス

各ページでは、各コントローラ固有のアセットを読み込む
全コントローラーで共通のアセットを読み込む
  • 設定方法 app/application.css, app/application.js
require_tree . を削除する

head内(slimの場合)

= stylesheet_link_tag params[:controller], media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag params[:controller], 'data-turbolinks-track' => true

config/initializers/assets.rb

Rails.application.config.assets.precompile << proc do |path|
  if path =~ /\.(css|js)\z/
    full_path = Rails.application.assets.resolve(path)
    app_assets_path = Rails.root.join('app', 'assets').to_path
    if full_path.starts_with? app_assets_path
      Rails.logger.info 'including asset: ' + full_path
      true
    else
      Rails.logger.info 'excluding asset: ' + full_path
      false
    end
  else
    false
  end
end

※rubocop対策済み

ベストプラクティスにしない場合

・他のコントローラーのアセットがapplication.cssやapplication.jsに存在してしまう
※そのページでは他のコントローラー用のcssやjsが読み込まれてしまう

・bodyタグにコントローラー名等を置いて、namespaceを作成して、
他のコントローラーのページにアセットが作用しないようにする

※毎回namespaceに対応するクラスを探すコストがかかる
※パフォーマンスの問題

http://railsguides.jp/asset_pipeline.html#%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E5%9B%BA%E6%9C%89%E3%81%AE%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88

クラス名のついて

bodyタグにコントローラー名やアクション名を置いたとしても、
サードパーティーのクラス名を被る可能性があります。
そのため、必ずベンダープレフィックスをつけるようにすべきです。