效能優化 (Performance)

效能是使用者體驗的關鍵。Nuxt 4 內建了許多優化機制，但作為開發者，我們仍需掌握一些技巧來確保應用程式保持輕量與快速。

Bundle 分析

優化的第一步是「測量」。使用 nuxi analyze 可以視覺化您的 Bundle 大小，找出肥大的依賴套件。

Terminal

npx nuxi analyze

這會啟動一個本地伺服器，展示 Treemap 圖表。常見的優化目標包括：

Nuxt 支援元件與路由的懶加載，這意味著程式碼只有在「需要時」才會被下載。

只需在元件名稱前加上 Lazy 前綴，Nuxt 就會自動將其拆分為獨立的 Chunk。

app.vue

<template>
  <!-- 只有當 show 為 true 時，才會下載 Modal 的程式碼 -->
  <LazyModal v-if="show" />
</template>

使用 lazy: true 可以讓頁面在資料尚未回來前先渲染，避免阻塞導航。

script setup

const { data, status } = await useFetch('/api/posts', {
  lazy: true
})

在 CI/CD 流程中，啟用建置快取可以大幅縮短部署時間。Nuxt 4 支援 useBuildCache (實驗性功能)。

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    buildCache: true
  }
})

Web Fonts 往往是造成 CLS (Cumulative Layout Shift) 的元兇。使用 @nuxt/fonts 可以自動處理：