Optipipe
Optipipeは、precompile済みのアセットに関して、必要なもののみを読み込む仕組みや、遅延読み込み(onload後等)に簡単に対応できるGemです。 具体的には、
- 複数のprecompile済みファイルを使用したり、アセットの(主にjavascriptの)依存関係をわかりやすく管理することを前提としたディレクトリ構成
- controller毎に指定した必要なファイルのみ読み込む仕組み
- onload後に読み込めれば問題ないファイルに関して、簡単に遅延読み込みを設定できる仕組み
を提供します。
これらによって、特にHTTP/2プロトコルを採用した際の並列読み込みに対して速度最適化を行うことができます。
Read this in other languages: 日本語
Installation
Gemfileに以下を追記して、gemを追加して下さい。
gem 'optipipe'
そしてbundle installを行って下さい。
$ bundle
最後に以下のコマンドを実行して初期設定を行って下さい。
$ rails g optipipe:install
Configure
初期設定のコマンドを叩くことで、
app/assets/
├── javascripts
│ └── optipipe
│ ├── files
│ │ ├── example.js
│ │ └── example_after_onload.js
│ ├── mappers
│ │ └── example_mapper.yml
│ └── precompiles
│ ├── example_precompile.js
│ └── example_precompile_after_onload.js
└── stylesheets
└── optipipe
├── files
│ └── example.css
├── mappers
│ └── example_mapper.yml
└── precompiles
└── example_precompile.css
上記のような構造でファイルとディレクトリが生成されます。 初期で生成されるファイルは全てサンプルなので、書き換えまたは削除を行って下さい。
BasicUsage
Helper
layoutのviewファイルで下記のように実行することで、controller毎に指定したアセットファイルが読み込まれます。
<%= optipipe_javascript_include_tag %>
<%= optipipe_stylesheet_link_tag %>
下記のように当てはまるMapperが無い場合にデフォルトで使用するMapperを指定できます。 指定するのはcontroller_pathに指定している値になります。
<%= optipipe_javascript_include_tag(default: 'welcome') %>
引数にHash形式でmapperのオプション条件を下記のように追加できます。
<%= optipipe_javascript_include_tag(mapper_conditions: {device: 'pc'}) %>
controller_path: 'welcome'
load_files:
- example_precompile
after_onload:
- example_precompile_after_onload
device: 'pc'
Mapper
Mapperでは、controller毎に読み込むprecompile済みのassetを設定できるようになっています。
controller_path
controller名を設定する。
namespase付きのcontrollerの場合は、/で区切って指定して下さい。(ActionControllerのcontroller_pathの値を使用しています)
load_files
読み込むprecompile済みのassetファイル名を指定します。
optipipe/precompiles配下にあるファイルを指定します。
after_onload
javascriptのonload後に読み込むassetファイル名を指定します。
optipipe/precompiles配下にあるファイルを指定します。
これはjavascripts用のMapperのみの設定です。
License
The gem is available as open source under the terms of the MIT License.