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

外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に向上させることができます。デフォルトでは、Server Components および 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` に追加します。

/** @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

レポートはブラウザで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 には、現在互換性の作業が行われており、自動的に除外される人気のパッケージのリストが含まれています。全リストを参照してください。