パッケージバンドリングの最適化
外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に向上させることができます。デフォルトでは、サーバーコンポーネントとルートハンドラ内でインポートされたパッケージは、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)レポートの生成
レポートはブラウザに3つの新しいタブを開き、検査することができます。 アプリケーションのバンドルを定期的に評価することで、時間の経過とともにアプリケーションのパフォーマンスを維持するのに役立ちます。
パッケージインポートの最適化
アイコンライブラリなど、一部のパッケージは数百のモジュールをエクスポートできるため、開発と本番環境でパフォーマンスの問題が発生する可能性があります。
optimizePackageImports オプションを `next.config.js` に追加することで、これらのパッケージのインポート方法を最適化できます。 このオプションは、実際に使用しているモジュールのみを読み込みますが、多くの名前付きエクスポートを含むimportステートメントを記述する利便性はそのままです。
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['icon-library'],
},
}
module.exports = nextConfigNext.jsは一部のライブラリを自動的に最適化するため、optimizePackageImportsリストに含める必要はありません。完全なリストを参照してください。
特定のパッケージをバンドルから除外する
サーバーコンポーネントとルートハンドラ内でインポートされたパッケージはNext.jsによって自動的にバンドルされるため、`next.config.js` の serverExternalPackages オプションを使用して、特定のパッケージをバンドルから除外できます。
/** @type {import('next').NextConfig} */
const nextConfig = {
serverExternalPackages: ['package-name'],
}
module.exports = nextConfigNext.jsには、現在互換性に取り組んでおり、自動的に除外されている一般的なパッケージのリストが含まれています。完全なリストを参照してください。