はじめに
この記事ではNext.jsでBundle Analyzerを使うための @next/bundle-analyzer
の設定手順をまとめています。pnpmの環境で作業しました。
Bundle Analyzerを使うことでバンドルサイズを可視化して確認することができます。
Terminal
pnpm analyze
最終的には上記のコマンドで確認できるようになります。
インストール
Terminal
pnpm add -D -E @next/bundle-analyzer
next.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
![Optimizing: Bundle Analyzer | Next.js](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F96994d35-1a77-4e28-a415-b0f2f15a06c1.png&w=1920&q=75)