アプリケーションのパッケージバンドルを最適化する

外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に改善できます。デフォルトでは、Server Component と Route Handlers 内でインポートされるパッケージは、Next.js によって自動的にバンドルされます。このページでは、パッケージバンドリングの分析とさらに最適化する方法について説明します。

JavaScript バンドルの分析

@next/bundle-analyzer は、アプリケーションのバンドルサイズを管理するのに役立つ Next.js のプラグインです。各パッケージとその依存関係のサイズに関するビジュアルレポートを生成します。この情報を使用して、大きな依存関係を削除したり、コードを分割したり、または遅延読み込みしたりすることができます。

インストール

次のコマンドを実行してプラグインをインストールします：

npm i @next/bundle-analyzer
# または \{#or}
yarn add @next/bundle-analyzer
# または \{#or}
pnpm add @next/bundle-analyzer

次に、next.config.js にバンドルアナライザーの設定を追加します。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {}

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)

レポートの生成

次のコマンドを実行してバンドルを分析します：

ANALYZE=true npm run build
# または \{#or}
ANALYZE=true yarn build
# または \{#or}
ANALYZE=true pnpm build

レポートは新しいタブが三つ開かれ、ブラウザで確認できます。アプリケーションのバンドルを定期的に評価することで、時間をかけてアプリケーションのパフォーマンスを維持することができます。

パッケージのインポートを最適化する

アイコンライブラリなどのいくつかのパッケージは、数百ものモジュールをエクスポートすることがあり、開発と本番環境でのパフォーマンスに問題を引き起こす可能性があります。

next.config.js に optimizePackageImports オプションを追加することにより、これらのパッケージを最適化できます。このオプションは、実際に使用するモジュールのみをロードしますが、多数の名前付きエクスポートを持つインポート文を記述する便利さを提供します。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library'],
  },
}

module.exports = nextConfig

Next.js は、いくつかのライブラリを自動的に最適化するため、それらを optimizePackageImports のリストに含める必要はありません。完全なリストはこちらを参照してください。

特定のパッケージをバンドルから除外する

Server ComponentとRoute Handlers 内でインポートされたパッケージはNext.jsにより自動的にバンドルされるため、next.config.js 内で serverExternalPackages オプションを使用して特定のパッケージをバンドルから除外することができます。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

Next.js は人気のあるパッケージのリストを含んでおり、現在、互換性を確保するために自動的に除外されるようにしています。完全なリストはこちらを参照してください。