バンドルサイズを削りやすい React コンポーネント設計

多くのライブラリは利便性のためにたくさんの機能を持っていて、その全てを活用するユーザーはほぼいません。一般的なライブラリにおいては、その中から必要な機能のみをバンドルに含めるための設計プラクティスが普及しており、Firebase JS SDK v9 での変更はその代表例でしょう。しかし、コンポーネントライブラリではそのようなプラクティスが発達しておらず、多くのアプリケーションでバンドルサイズに無視できない影響を与えています[1]。 そこで、バンドルサイズを削りやすいコンポーネント設計を考えます。ここでは例として、以下のようにフェードインするタグコンポーネントを Framer Motion を使って実装することを考えます[2]。フェードインの有無は何らかの方法で切り替えられるものとし、フェードインしない場合に、その関連コードをバンドルから削るようにします。 ❌ Boolean プロパティで切

[efcl]

Reactコンポーネントでコンポーネント内の分岐で利用するライブラリが含まれるかが変わるケースについて。 ただのif文だと常に含まれるが、コンポーネントの依存を外からinjectすれば必要なときだけライブラリを含めるこ

[shingo-sasaki-0529]

Dynamic Import はパッと思いついたけど、機能を注入する形にしてコンポーネント自身のバンドルサイズを抑えるのはなるほどなと思った。 今度は注入する側で不必要に読み込まないように意識する必要ありそうだけど。

[berlysia]

コンポーネント内でライブラリを使うとき、単純に分岐するとバンドルに入る。childrenを含めたpropsやcontextで受け渡すと、コンポーネントとライブラリの結合が弱くなり、扱いやすくなる。

[mizdra]

分かりやすい