UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】loadable-componentsとは

loadable-componentsというワードを聞いて知らなかったので調査した

loadable-components.com

何かというと

  • 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