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

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

JavaScriptバンドルの分析

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

インストール

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

npm i @next/bundle-analyzer
# または
yarn add @next/bundle-analyzer
# または
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
# または
ANALYZE=true yarn build
# または
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リストに含める必要はありません。完全なリストを参照してください。

特定パッケージのバンドリング

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

next.config.js

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

module.exports = nextConfig

すべてのパッケージのバンドリング

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

next.config.js

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

module.exports = nextConfig

特定パッケージのバンドリング除外

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

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Pages Routerで外部パッケージを自動バンドル：
  bundlePagesRouterDependencies: true,
  // App RouterとPages Routerの両方で特定パッケージをバンドリング除外：
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig

本番環境

Next.js アプリケーションを本番環境に移行する前に、最高のパフォーマンスとユーザーエクスペリエンスを確保するための推奨事項。

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

JavaScriptバンドルの分析

インストール

レポートの生成

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

特定パッケージのバンドリング

すべてのパッケージのバンドリング

特定パッケージのバンドリング除外

本番環境

On this page