Reactアプリのロード時間を70%短縮する方法 ~ コード分割と遅延読み込みでパフォーマンス改善する

9月14日、dev.toに「How to Reduce React App Loading Time By 70%」が公開された。
この記事では、コード分割と遅延読み込みを利用してReactアプリの初期ロード時間を短縮する手順を紹介している。

アプリの規模が大きくなると、パフォーマンスが低下することがある。特に、アプリの初期ロード時間に影響が出てくる。

この問題を解決するために、React自体がコード分割と遅延読み込みする解決策を持っている。
これにより、バンドルファイルをより小さなサイズに分割することができる。

題材は、以下のようなダッシュボードを持つアプリだ。

クレジット: Nilanth

最初の段階では、読み込み時間は2.9秒。
それから、コード分割を効果的に使い、調整をした結果、1秒に短縮できている。

コンポーネントを最適な方法で構造化し、ReactのAPIを効果的に使用することで、大規模アプリのパフォーマンスを向上させることができる。