React アプリケーションを動的に遅延読み込みコンポーネントに変換して、Lighthouse のパフォーマンス スコアを上げようとしています。そのためにReact コード分割のドキュメントに従っています。
ドキュメントに従って、以下に示すように、コンポーネントが App.js ファイルに読み込まれる方法を切り替えようとしました。
//Before
import Component from './components/examples/Component';
//After
const Component = lazy(() => import('./components/examples/Component'));
ただし、これを行うと、サーバーが http://localhost:3000/App.js を取得しようとすると、サイトで 404 エラーが発生するため、Componentを使用した App.js のルートが読み込まれません。遅延ロードする各コンポーネントを返すために、サーバーにルートを追加する必要がありますか? これについてのドキュメントには何もありません...
App.jsルートをやり直す方法ではなく、なぜこれが起こっているのかを探しています。