dynamic import とは何か

dynamic import は、ファイルの先頭で静的に読み込むのではなく、import() 式を使ってモジュールを実行時に読み込みます。モジュールがフェッチされ評価されると、それを解決する promise を返します。bundler は dynamic import を分割点として使い、必要なときにのみ読み込まれる個別の chunk を生成します。

なぜ重要か

すべての機能を最初に読み込むと、初回のレンダリングが遅れます。dynamic import は、めったに使われないコードを実際に要求されるまで遅延させ、初期の bundle を小さくして first paint を高速化します。

関連ガイド