この記事ではNext.jsでBundle Analyzerを使うための @next/bundle-analyzer
の設定手順をまとめています。pnpmの環境で作業しました。
Bundle Analyzerを使うことでバンドルサイズを可視化して確認することができます。
pnpm analyze
最終的には上記のコマンドで確認できるようになります。
pnpm add -D -E @next/bundle-analyzer
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を修正{
"scripts": {
"analyze": "ANALYZE=true pnpm build"
},
}
以上でBundle Analyzerでバンドルサイズの確認ができるようになります。
pnpm analyze
を実行すると解析結果がブラウザで開きます。