React.lazyを利用してJavaScriptファイルを分割ロードReactでは作成したアプリケーションはwebpackにより全てのコードが1つのJavaScriptファイルにバンドルされます。 小さなアプリケーションならよいですが大きなアプリケーションですと初期表示に読み込むJSファイルが増加していく問題を抱えています。 React.lazy は JavaScriptファイルを分割して利用しているコンポーネントが呼び出されたタイミングでロードするための機能です。 React.lazyの利用 次のように記述すると遅延読み込み用のコンポーネントが作成されます。 const SomeComponent = React.lazy(() => import('./SomeComponent')); React.lazyはReact.Suspense と一緒に利用して、このコンポーネントが呼び出されたタイミングで通信を行いコンポーネントファイルを取得します。 co
