Zenn
📊

NextJSのバンドルサイズを確認する

2023/01/15に公開
Next.js
React
TypeScript
tech

やりたいこと

NextJS(13)で作成したサイトが重いとき、何が原因で重いのか調べて対応できる とかっこいい ようになりたい。

やったこと

@next/bundle-analyzer のインストール

for NPM
npm install @next/bundle-analyzer
for YARN
yarn add @next/bundle-analyzer

next.config.js を編集

next.config.js

    /** @type {import('next').NextConfig} */

+   const withBundleAnalyzer = require('@next/bundle-analyzer')({
+     enabled: process.env.ANALYZE === 'true',
+   })

    const nextConfig = {
      reactStrictMode: true,
    };

-   module.exports = nextConfig;
+   module.exports = withBundleAnalyzer({...nextConfig})

実行

ANALYZE=true yarn build

表示される

やった方がいいこと

yarn analyze で実行できるようにコマンドを追加しておく。

package.json

・・・

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "analyze": "ANALYZE=true next build"
  },
  
・・・

👇

yarn analyze

参考

https://fwywd.com/tech/next-bundle-analyzer

https://zenn.dev/catnose99/scraps/661d77118aa2af

Discussion