バンドルの最適化

外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に向上させることができます。 デフォルトでは、アプリケーションにインポートされたパッケージはバンドルされません。これはパフォーマンスに影響を与えたり、モノレポやnode_modulesからインポートされた場合など、外部パッケージが事前にバンドルされていない場合に動作しない可能性があります。このページでは、パッケージのバンドルを分析し、設定する方法について説明します。

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リストに含める必要はありません。全リストを参照してください。

特定のパッケージをバンドルする

特定のパッケージをバンドルするには、next.config.jsでtranspilePackagesオプションを使用できます。このオプションは、モノレポやnode_modulesからインポートされるなど、事前にバンドルされていない外部パッケージをバンドルするのに役立ちます。

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

すべてのパッケージをバンドルする

すべてのパッケージを自動的にバンドルするには (App Routerでのデフォルトの動作)、next.config.jsでbundlePagesRouterDependenciesオプションを使用できます。

/** @type {import('next').NextConfig} */
const nextConfig = {
  bundlePagesRouterDependencies: true,
}
 
module.exports = nextConfig

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

bundlePagesRouterDependenciesオプションを有効にしている場合、next.config.jsのserverExternalPackagesオプションを使用して、特定のパッケージを自動バンドルから除外できます。

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Automatically bundle external packages in the Pages Router:
  bundlePagesRouterDependencies: true,
  // Opt specific packages out of bundling for both App and Pages Router:
  serverExternalPackages: ['package-name'],
}
 
module.exports = nextConfig