React:ページ単位じゃなくグループ単位でコード分割する

今回は、React.lazyを使って、グループ単位でバンドルファイルを分割する方法です。 React公式 ルーティング単位でコード分割する方法 目的 アプリが大きくなると、ビルドで作成されるバンドルファイルのサイズが大きくなって アプリの初期ロード時に、モジュールの読み込みに時間がかかってしまいます。 この初期ロード時のモジュールの読み込み時間を短縮する方法として、バンドルファイルを分割し、初期ロード時は必要なもののみ読み込み残りはユーザーが必要なときに遅延読み込みします。 ページ単位でコード分割すると、バンドルファイルの数が多くなりすぎます。 また分割したバンドルファイルが必要になった時、モジュールを読み込む時間が発生します。 一度読み込んだモジュールはキャッシュされるとはいえ、ページ単位でモジュール読み込みが発生すると、SPAの軽快な動作に支障が出ます。 ページ単位では粒度が小さすぎる