パッケージバンドリングの最適化

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

JavaScript バンドルの分析

@next/bundle-analyzer は、アプリケーションバンドルのサイズを管理するための Next.js プラグインです。各パッケージとその依存関係のサイズを視覚的に報告します。この情報を使用して、大きな依存関係を削除したり、コードを分割または遅延ロードしたりできます。

インストール

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

npm i @next/bundle-analyzer
# または
yarn add @next/bundle-analyzer
# または
pnpm add @next/bundle-analyzer

次に、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
# または
ANALYZE=true yarn build
# または
ANALYZE=true pnpm build

レポートがブラウザに3つの新しいタブで開きます。定期的にアプリケーションのバンドルを評価することで、長期的なアプリケーションのパフォーマンスを維持できます。

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

アイコンライブラリなどの一部のパッケージは、数百のモジュールをエクスポートするため、開発および本番環境でパフォーマンスの問題を引き起こす可能性があります。

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

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

Next.js は一部のライブラリを自動的に最適化するため、optimizePackageImports リストに含める必要はありません。完全なリストをご覧ください。

バンドリングから特定のパッケージを除外

サーバーコンポーネントとルートハンドラー内でインポートされたパッケージが Next.js によって自動的にバンドルされるため、next.config.js の serverExternalPackages オプションを使用して、特定のパッケージをバンドリングから除外できます。

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

Next.js には、現在互換性に取り組んでいる人気のパッケージのリストが含まれており、自動的に除外されています。完全なリストをご覧ください。