Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails関連

Rails: Webpacker(Shakapacker)とjsbundling-railsの比較(翻訳)

概要

MITライセンスに基づいて翻訳・公開いたします。

表記の大文字小文字は「Webpacker」「Shakapacker」「webpack」「jsbundling-rails」「cssbundling-rails」に統一しました。また、読みやすさのため書式を変更しています。

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 splittingHMR(Hot Module Replacement)を提供するためのカスタマイズ可能なwebpackコンフィグも提供します。webpackのWebpackerコンフィグは必須ではなく、ビューヘルパー部分だけを利用する目的でWebpackerやShakapackerを使うことも可能です。

jsbundling-rails
webpackの他にも複数のバンドラーを利用できます(現時点ですぐ利用できるのはesbuildrollupwebpackですが、バンドルを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およびShakapacke
上とほぼ同じ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が向上するからです。

関連記事

Rails: Webpacker v5からShakapacker v6へのアップグレードガイド(翻訳)

Rails 7: importmap-rails gem README(翻訳)


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。