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

外部パッケージのバンドルは、アプリケーションのパフォーマンスを大幅に向上させることができます。デフォルトでは、Server componentとRoute handlerの内部でインポートされたパッケージはNext.jsによって自動的にバンドルされます。このページでは、パッケージのバンドルを分析し、さらに最適化する方法を案内します。

JavaScriptバンドルの分析

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

インストール

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

npm i @next/bundle-analyzer
# or \{#or}
yarn add @next/bundle-analyzer
# or \{#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 \{#or}
ANALYZE=true yarn build
# or \{#or}
ANALYZE=true pnpm build

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

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

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

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 handler内でインポートされたパッケージはNext.jsによって自動的にバンドルされるため、next.config.jsでserverExternalPackagesオプションを使用して特定のパッケージをバンドルから外すことができます。

next.config.js

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

module.exports = nextConfig

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