Reactガイドを読んでいくその30
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
コード分割
バンドル
ReactアプリはWebpack、Rollup や Browserifyを利用してバンドルしています。
バンドルされたファイルをページ内に置くことで一度にアプリ全体を読むことができる。
Create React App や Next.js, Gatsbyと言ったツールを利用している場合、アプリケーションをバンドルするためのWebpackの設定が追加の設定なしにすぐ手に入る。
ツールを使用していない場合はWebpackのInstallation や Getting Started をみて自分でインストールを行う
コード分割
アプリが大きくなるとバンドルも大きくなり、もともとサイズの大きいサードパーティ製のライブラリを使用している場合はサイズに懸念が出てくる。
大きなバンドルを作らないためにコードを分割して置くと問題になりにくい。
Code-SplittingはWebpackやRolliup、Browserifyなどのバンドらにサポートされている機能なので、実行時に動的にロードされる複数のバンドルを生成することができる。
コード分割は遅延読み込みをするためのサポートとして役立ち、不要なロードを減らすことで初期ロードの時間を増やすことができる。
少ないですが、今日はここまで。