何回も聞いたことあるCode Splittingについて概要を調べてみた
以下の記事をみてちゃんと理解したい qiita.com
要はその名の通り「コードを分割すること」みたい
初期表示時には不必要なコードを分割しておき、アプリケーションのペイロードサイズが削減することで、アプリケーションの読み込みが高速化されるよねというもの
分割した残りのコードはユーザが必要な時に「遅延読み込み」を使って動的にロードする
「遅延読み込み」は主に、Dynamic Importの構文を使うようで、現在はWebpackやBrowserifyなどのバンドラーを使うか、ReactだとLoadable Componentなるもので実現可能みたい
Webpackを使っているNext.jsではサポートしている
Code Splittingのパターンは大きく３つが主流のようで、これは上の@seyaさんの記事がわかりやすかったので割愛
- Page
- Fold
- Temporal
