Reactのコード分割と遅延読み込み

Reactアプリケーションは通常、特に設定しなければhtmlや外部リソースを除くと、1つのバンドルファイルのみが書き出さます。これはいくつコンポーネントがあっても同じです。結果、1つのファイルサイズが大きくなるため、読み込み・解析に時間がかかることになります。 これを回避するのがコード分割と遅延読み込み（Lazy Loading）です。ルーティングやイベント処理など、必要なときに必要分のコンポーネントを動的にインポートしてくれます。 本記事では、ライブラリを使わないReactの動的読み込みと、react-loadableライブラリを利用した方法に触れてみます。 ライブラリを使用せずに遅延読み込み まずはライブラリを使わずに遅延読み込みを行ってみます。ディレクトリの構造は以下を想定しています。 /src - /components - /modules - moduleA.js - Load