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

外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に向上させることができます。デフォルトでは、Server ComponentsとRoute Handlers内でインポートされたパッケージは、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リストに含める必要はありません。完全なリストを参照してください。

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

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

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

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