Railsアプリのアセットプリコンパイルを高速化するコツ（翻訳）

概要

原著者の許諾を得て翻訳・公開いたします。

• 英語記事: How to Speed Up Assets Precompilation Time in Ruby on Rails App
• 原文公開日: 2018/01/10
• 著者: Marcin Brzeziński
• サイト: netguru

Railsアプリのアセットプリコンパイルを高速化するコツ（翻訳）

Rails開発者なら誰でも、アセットの読み込みに非常に時間がかかることを痛感しています。アセット読み込みを高速化する便利なコツをご紹介します。

コツ

• 1つの巨大なファイルに何もかもバンドルしないこと。CDNを用いて、必要なページでだけrequireしましょう（CDNはCKeditorなどのツールでも使われています）。
• I18n-jsは翻訳を個別のファイルに保持します。必要な言語だけを設定するようにしましょう。さもないと、新しいライブラリを導入するたびに翻訳ファイルがあっという間に肥大化してしまいます。必要な言語だけを設定することでコンパイル済みファイルの肥大化を回避でき、ひいてはコンパイルとページ読み込みを高速化できます。

config.i18n.available_locales = %i(en)

• therubyracerをGemfileから削除しましょう。このgemはメモリを大量に消費するためです。代わりに、最新バージョンのNodeをインストールします。
  • https://devcenter.heroku.com/articles/rails-asset-pipeline#therubyracer
• SASSファイルやSCSSファイルでrequire、require_tree、require_selfを使わないこと。これらはあまりに素朴であり、Sassファイルでうまく動作しません。代わりに、Sassネイティブの@importディレクティブを使いましょう。sass-railsはこのディレクティブをカスタマイズしてRailsプロジェクトの慣習に統合します。
  • https://github.com/rails/sass-rails#important-note
• SASSファイルやSCSSファイルでの@importディレクティブの使い方には注意が必要です。@import 'compass/css3/flexbox'のように個別にインポートできる状況であれば、@import 'compass';のようにパッケージアセットをまるごとインポートするのは避けましょう。
• JavaScriptやCoffeeScriptのマニフェストでrequire_tree .を使うのは避けましょう。次のように、アプリの管理（admin）パネルが独自のアセットを持つ場合を考えてみます。

//** assets/javascripts/admin/admin.js

//= require admin/tab.js
//= ...

//** assets/javascripts/application.js

//= require 'something'
//= require_tree . // 悪手: adminのアセットまでrequireされてしまう

• アセットをコンパイルするときのログをチェックしましょう。デフォルトのロガーをオーバーライドしてDEBUGモードでアクセスしたときの状態を確認するのは簡単です。

# /lib/tasks/assets.rake

require 'sprockets/rails/task'

Sprockets::Rails::Task.new(Rails.application) do |t|
  t.logger = Logger.new(STDOUT)
end

まとめ

上のルールはコンパイル済みアセットを高速化するのに有用です。この概念を実証するcintrzyk/sprockets-tipsをご覧いただければ、Railsのサンプルアプリでより詳細な部分を確認できます。

Rails 5.1以降、アセットの管理方法は多様になりました。私はYarnとWebpackによる管理を強くおすすめします。その有用性については、ぜひ私を信じてください。アセットの依存性管理、効率の高いコンパイルプロセス、ページを更新せずにコードを動的に再読み込みする機能、ES6サポート、PostCSSなど、多くのメリットを得られます。

関連記事

新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳）