Rails: Webpacker（Shakapacker）とjsbundling-railsの比較（翻訳）
既にWebpackerを使っている方は、Webpackerがjsbundling-railsと比べてどうなのかや、Webpackerの公式フォークであるShakapackerに移行すべきかどうかが気になっていることでしょう。なおShakapackerのフォークプロジェクト内では、まだWebpackerという名称を使っているので、簡単に試せます。そのため、以下の議論はWebpacker/Shakapackerのv6以降と、jsbundling-railsの比較について該当します。
両者には以下のような考慮点があります。
- jsbundling-rails
- インストール済みファイルといくつかの新しいrakeタスクのみで構成された、よりシンプルな統合です。
- WebpackerおよびShakapacker
- ビューヘルパーを提供するとともに、webpackの最も重要かつ高度な機能であるcode splittingとHMR（Hot Module Replacement）を提供するためのカスタマイズ可能なwebpackコンフィグも提供します。webpackの
Webpackerコンフィグは必須ではなく、ビューヘルパー部分だけを利用する目的でWebpackerやShakapackerを使うことも可能です。
- jsbundling-rails
- webpackの他にも複数のバンドラーを利用できます（現時点ですぐ利用できるのは
esbuild・rollup・webpackですが、バンドルをapp/assets/buildsに配置できるバンドラーなら何でも利用できます）。 - WebpackerおよびShakapacker
- webpackとの統合に特化しています。WebpackerはこれによりHMRやcode splittingがサポート可能になっています。
- jsbundling-rails
- バンドルやトランスパイルに用いるJavaScriptパッケージの特定のバージョンに束縛されません。
- WebpackerおよびShakapacker
- 同様に、リリースはwebpackやbabelなどの特定のメジャーバージョンに束縛されません。Webpackerはそれらを「peer dependency」と指定するので、そのように扱われます。
- jsbundling-rails
- 利用するバンドラーの標準的な設定フォーマットが使われます。
- WebpackerおよびShakapacker
- webpackの設定の上にオプションの設定レイヤを配置します。このオプションは必須ではありません。Webpackerの必要条件は、「webpackの構成が必ずマニフェストを生成すること」だけです。
- jsbundling-rails
- Rails標準の
actionviewアセットヘルパーを利用します。 - WebpackerおよびShakapacker
- 上とほぼ同じAPIのビューヘルパーを提供します。
- WebpackerおよびShakapacker
sprocketsを完全に置き換えるために利用でき、その場合はアプリケーションにおけるsprockets/railtieの読み込みをセットアップで停止できます。webpackのエコシステムで作成されたものは、そのままブラウザに送信されます。- jsbundling-rails
- sprocketsと連携して動作します（
cssbundling-railsも同様にsprocketsと連携動作します）。このため、webpackとsprocketsの両方がアセットにフィンガープリントを二重に追加しないよう注意する必要があります。出力ファイルのフィンガープリントが重複するとsourcemapで問題が発生する可能性もあります。
- WebpackerおよびShakapacker
webpack-dev-serverでホットリロードをサポートしています。HMRのおかげで変更はほぼ瞬時にブラウザに反映され、ページを再読み込みする必要もなければアプリケーションのステートが失われることもありません。- jsbundling-rails
- 静的ファイルをsprocketsに渡すので、それ自体はホットリロードをサポートしていません。JavaScriptの変更を読み込むには、何らかの形でページ全体を再読み込みしてローカルのステートをクリアする必要があります。
- WebpackerおよびShakapacker
- アセット処理全体を外部のNode.jsツールに任せています。
- jsbundling-rails
- 最終的な
publicアセットの出力や、関連するマニフェストの作成については、引き続きsprocketsに依存します。
- Webpacker
- 結果として得られるwebpack出力ファイルを完全に制御することで、自動code splittingなどの追加機能を統合可能にしています。webpackは、静的に
importされた共有依存関係を分割する高度な最適化機能を提供しています。WebpackerおよびShakapackeのビューヘルパーは、得られたHTMLで各エントリポイントが依存するチャンクを自動的に指定します。 - jsbundling-rails
- 動的な
import()を用いれば、遅延読み込みされたチャンクを手動で分割することは可能です。しかし、このような手動のアプローチを採用する大規模プロジェクトはメンテナンスが困難になる可能性もあります。code splittingが重要なのは、これによってブラウザはそのページに必要なJavaScriptとCSSだけをダウンロードすれば済むようになり、パフォーマンスとSEOが向上するからです。
概要
MITライセンスに基づいて翻訳・公開いたします。
表記の大文字小文字は「Webpacker」「Shakapacker」「webpack」「jsbundling-rails」「cssbundling-rails」に統一しました。また、読みやすさのため書式を変更しています。