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

外部パッケージのバンドルは、アプリケーションのパフォーマンスを大幅に向上させることができます。デフォルトでは、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には、互換性に取り組んでおり、自動的に除外されている一般的なパッケージのリストが含まれています。全リストについてはこちらを参照してください。