loadable-componentsというワードを聞いて知らなかったので調査した
何かというと
- Reactコード分割ライブラリ
- React.lazyに代わるものではありません
- Reactチームが推奨するソリューション
どんな特徴があるかというと
- Library Splitting
- prefetch
- SSR
- full dynamic import
Code Splittingをいい感じにしてくれるライブラリらしい
導入は簡単
npm install @loadable/component
import loadable from '@loadable/component' const OtherComponent = loadable(() => import('./OtherComponent')) function MyComponent() { return ( <div> <OtherComponent /> </div> ) }
このようにシンプルに実装できるし、機能も充実しているみたいで使い勝手よさそう
他参考
Reactのcode splitting用のライブラリとしてloadable-componentsが良かったので推していきたい | by terrierscript | Medium
An SEO approach to async components with loadable-components - LogRocket Blog