web-dev-qa-db-ja.com

コード分​​割にreact-loadableまたはloadable-componentsを使用する必要がありますか？

反応コードをサーバーサイドレンダリングで分割したい。そのためには、2つの選択肢があります。

  • ロード可能なコンポーネント
  • 反応ロード可能

ロード可能なコンポーネント

サーバーでレンダリングされたアプリにloadable-componentsを使用することを提案したReactドキュメント。しかし、NPMの毎週のダウンロードはほとんどありません。

反応ロード可能

このパッケージのNPMの毎週のダウンロードは前のものと比較して非常に高いですが、loadable-componentsのドキュメントによると、このパッケージはもう維持されていません。

react-loadableはReactコードを長期間分割するための推奨される方法でした。しかし、今日ではそれはもはや維持されておらず、Webpack v4 +およびBabelv7 +と互換性がありません。 ドキュメントリンク

適切なパッケージで私をギルドしてください。

reactjswebpackreact-loadable
7
Swaroop Deval

React.lazy を使用できます。これにより、このコンポーネントがレンダリングされるときに、OtherComponentを含むバンドルが自動的にロードされます。

React.lazyは、動的なimport（）を呼び出さなければならない関数を取ります。これは、Reactコンポーネントを含むデフォルトのエクスポートを持つモジュールに解決されるPromiseを返す必要があります。

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}
0
Tayyab Razzaq