はじめに
この記事ではNext.jsでBundle Analyzerを使うための @next/bundle-analyzer の設定手順をまとめています。pnpmの環境で作業しました。
Bundle Analyzerを使うことでバンドルサイズを可視化して確認することができます。
Terminal
pnpm analyze最終的には上記のコマンドで確認できるようになります。
インストール
Terminal
pnpm add -D -E @next/bundle-analyzernext.config.js を修正
next.config.js
/** @type {import('next').NextConfig} */
const withBundleAnalyzer = import('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const nextConfig = {
//...
}
module.exports = withBundleAnalyzer(nextConfig)package.json のscriptsを修正
package.json
{
"scripts": {
"analyze": "ANALYZE=true pnpm build"
},
}以上でBundle Analyzerでバンドルサイズの確認ができるようになります。
pnpm analyze を実行すると解析結果がブラウザで開きます。
公式ドキュメント
Optimizing: Bundle Analyzer | Next.js
Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin.
nextjs.org
