Next.jsのDynamic Importでコード分割してパフォーマンスアップする方法【バンドルサイズ最小化/動的インポート】

2022-05-08

コード分割とは

ReactフレームワークであるNext.jsはビルド時にwebpackによってバンドル化されます。簡単に言うと、複数のファイルに分けて作っているアプリケーションが、一つのファイルにまとめられます。

webpackのバンドルについて詳細はこちらの記事を参照ください。

バンドルサイズが小さい方がWebページの読み込みにかかる時間が短くなります。なのでユーザーフレンドリーで快適に閲覧できるWebサイト・アプリケーションを作るためには、バンドルサイズの縮小を意識して設計することが重要です。

補足

Next.jsは自動的にコード分割を行ってくれるので、表示するページに必要なコードだけ読み込むようになっています。なので、コードが複数のページに別れているという場合は、特に設計時にコード分割を考慮しなくてもパフォーマンスが最適化されるようです。

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

This ensures that the homepage loads quickly even if you have hundreds of pages.

参考 : Next.jsチュートリアル | Code splitting and prefetching

Dynamic Importとは

Dynamic import(動的インポート)はJavaScriptで提供されている機能です。通常のインポート(静的インポート)は前述したとおりロードに時間がかかる一方、動的インポートはインポートするモジュールを必要とするページにアクセスした時点やボタンを押したときなど好きなタイミングでモジュールをインポートさせることができるため、うまく使えば初回アクセスのロード時間を大幅に短縮できる可能性があります。

MDN Web Doc | 動的インポート

// 静的インポート
import '/modules/my-module';

// 動的インポート
import('/modules/my-module')
  .then((module) => {
    // module を使った何らかの処理
  });

例で.then()を使っているように、動的インポートはPromiseオブジェクトを返す非同期処理になります。

非同期処理についてはこちらの記事にまとめています。

TypeScriptの非同期処理とは何か・Promiseの基本的な使い方をまとめてみる【then/catch/finally/async/await】

Next.jsでDynamic Importを使いコード分割する方法

実は以前のNext.jsはDynamic Importに対応していなかったのですが、現在はNext.js専用の動的インポート機能が導入されています。

詳しくはこちら : Vercel | Dynamic Import

使い方は簡単で、以下のようにまずNextからdynamicをインポートし、動的インポート構文を関数で渡します。

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/my-module'))

function Home() {
  return (
    <div>
      <DynamicComponent />
    </div>
  )
}

export default Home