ChatHub — Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-sideバンドルの最適化
外部パッケージをバンドルすることで、アプリケーションのパフォーマンスを大幅に向上させることができます。 デフォルトでは、アプリケーションにインポートされたパッケージはバンドルされません。これはパフォーマンスに影響を与えたり、外部パッケージが事前にバンドルされていない場合（例えば、モノレポや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に追加します。
/** @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 = 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 = {
// Pages Routerで外部パッケージを自動的にバンドルする：
bundlePagesRouterDependencies: true,
// App RouterとPages Routerの両方で特定のパッケージをバンドルから除外する：
serverExternalPackages: ['package-name'],
}
module.exports = nextConfig