パッケージのバンドル最適化方法
外部パッケージのバンドルはアプリケーションのパフォーマンスを大幅に向上させることができます。デフォルトでは、Server ComponentsとRoute Handlers内でインポートされたパッケージはNext.jsによって自動的にバンドルされます。このページでは、パッケージバンドルを分析し、さらに最適化する方法をご案内します。
JavaScriptバンドルの分析
@next/bundle-analyzer
はNext.js用のプラグインで、アプリケーションバンドルのサイズ管理に役立ちます。各パッケージとその依存関係のサイズに関する視覚的なレポートを生成します。この情報を使用して、大きな依存関係を削除したり、コードを分割したり、遅延読み込みしたりすることができます。
インストール
以下のコマンドを実行してプラグインをインストールします:
npm i @next/bundle-analyzer
# または
yarn add @next/bundle-analyzer
# または
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
# または
ANALYZE=true yarn build
# または
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には、現在互換性に取り組んでいて自動的に除外される一般的なパッケージのリストが含まれています。完全なリストをご覧ください。