バンドルの最適化
外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に向上させることができます。 デフォルトでは、アプリケーションにインポートされたパッケージはバンドルされません。これは、外部パッケージが事前にバンドルされていない場合、例えば、モノレポまたは 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)レポートの生成
レポートはブラウザに3つの新しいタブを開き、検査することができます。アプリケーションのバンドルを定期的に評価することで、アプリケーションのパフォーマンスを長期的に維持することができます。
パッケージインポートの最適化 オプションを next.config.js に追加することで、これらのパッケージのインポート方法を最適化できます。このオプションは、実際に使用しているモジュールのみを読み込み、多くの名前付きエクスポートを含むimportステートメントを記述する利便性を維持します。
next.config.js/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['icon-library'],
},
}
module.exports = nextConfig
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['icon-library'],
},
}
module.exports = nextConfigNext.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