バンドルアナライザー
@next/bundle-analyzer はNext.jsのプラグインで、JavaScriptモジュールのサイズ管理を支援します。各モジュールとその依存関係のサイズを視覚的なレポートとして生成します。この情報を活用して、大きな依存関係を削除したり、コードを分割したり、必要な部分だけを読み込むことで、クライアントに転送されるデータ量を削減できます。
インストール
以下のコマンドを実行してプラグインをインストールします:
npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer次に、バンドルアナライザーの設定を next.config.js に追加します。
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = withBundleAnalyzer(nextConfig)バンドルの分析
以下のコマンドを実行してバンドルを分析します:
ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm buildレポートはブラウザで3つの新しいタブとして開かれ、確認できます。開発中やサイトをデプロイする前に定期的にこの分析を行うことで、大きなバンドルを早期に特定し、よりパフォーマンスの高いアプリケーション設計が可能になります。