Nuxtのバンドルサイズを効率的に削減する方法｜分析・最適化・監視の実践ガイド

npx nuxi analyze

# ブラウザを自動で開かずにレポートファイルだけ生成
npx nuxi analyze --no-serve

# ログレベルを変更
npx nuxi analyze --logLevel=verbose

// nuxt.config.ts
export default defineNuxtConfig({
  build: {
    analyze: {
      template: 'treemap',
      filename: '.nuxt/analyze/{name}.html',
    },
  },
})

npm install -D rollup-plugin-visualizer

// nuxt.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineNuxtConfig({
  vite: {
    plugins: [
      visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true,
        filename: '.nuxt/stats.html',
      }),
    ],
  },
})

<template>
  <div>
    <!-- 常に表示するコンポーネント -->
    <Header />

    <!-- ボタンクリック時にはじめてJSが読み込まれる -->
    <LazyContactForm v-if="showForm" />
    <button @click="showForm = true">お問い合わせ</button>

    <!-- スクロールして見える範囲に入ったときに読み込み -->
    <LazyReviewList hydrate-on-visible />
  </div>
</template>

<script setup lang="ts">
const showForm = ref(false)
</script>

<!-- フッターはスクロールするまでハイドレーション不要 -->
<LazyFooter hydrate-on-visible />

<!-- サイドバーはブラウザアイドル時にハイドレーション -->
<LazySidebar hydrate-on-idle />

<!-- FAQアコーディオンはクリック時にハイドレーション -->
<LazyFaqAccordion hydrate-on-interaction="click" />

components/
  HeavyMarkdown.server.vue   # サーバーのみ（クライアントJS = 0）
  Chart.client.vue            # クライアントのみ
  Button.vue                  # 通常（SSR + ハイドレーション）

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: true,
  },
})

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true,
    },
  },
})

<!-- サーバーコンポーネント内にクライアントコンポーネントを部分的に埋め込む -->
<template>
  <div>
    <HeavyMarkdown :content="markdownText" />
    <LikeButton nuxt-client :post-id="123" />
  </div>
</template>

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    define: {
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false,
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  optimization: {
    treeShake: {
      composables: {
        server: {
          // サーバービルドから除外するcomposable
        },
        client: {
          // クライアントビルドから除外するcomposable
        },
      },
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    compressPublicAssets: {
      gzip: true,
      brotli: true,
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true,
  },
})

// NG: ライブラリ全体がバンドルされる
import _ from 'lodash'
_.debounce(fn, 300)

// OK: debounce関数のコードだけがバンドルされる
import { debounce } from 'lodash-es'
debounce(fn, 300)

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              if (id.includes('vue') || id.includes('@vue')) {
                return 'vue-vendor'
              }
              if (id.includes('pinia')) {
                return 'pinia'
              }
              return 'vendor'
            }
          },
        },
      },
      chunkSizeWarningLimit: 500, // 500KB超で警告
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },           // ビルド時に静的HTML生成
    '/blog/**': { swr: 3600 },          // 1時間キャッシュのSWR
    '/products/**': { isr: 3600 },      // ISR（増分静的再生成）
    '/admin/**': { ssr: false },        // 管理画面はSPA（SSR不要）
    '/landing': { experimentalNoScripts: true }, // JSなしの静的ページ
  },
})

npx nuxi module add @nuxt/image

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    quality: 80,
    format: ['webp', 'avif'],
  },
})

<template>
  <!-- 自動で width/height 属性が付与され CLS を防止 -->
  <NuxtImg
    src="/hero.jpg"
    width="1200"
    height="630"
    loading="eager"
    fetchpriority="high"
    format="webp"
  />

  <!-- ファーストビュー外の画像は遅延読み込み -->
  <NuxtImg
    src="/feature.png"
    width="600"
    height="400"
    loading="lazy"
  />
</template>

npx -p nuxt-bundle-analysis generate

// package.json に追加
{
  "nuxtBundleAnalysis": {
    "statsFile": ".nuxt/stats/client.json",
    "buildOutputDirectory": ".nuxt",
    "minimumChangeThreshold": 0,
    "builder": "vite"
  }
}

npm install -D size-limit @size-limit/file

// package.json
{
  "size-limit": [
    {
      "path": ".output/public/_nuxt/*.js",
      "limit": "300 kB"
    }
  ],
  "scripts": {
    "size": "size-limit",
    "size:check": "size-limit --limit"
  }
}

# .github/workflows/size-limit.yml
name: Bundle Size Check
on: [pull_request]
jobs:
  size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}