在前幾天，我們見證了 Vapor Mode 與 Alien Signals 帶來的性能革命：跳過 Virtual DOM diff、直接編譯為最小 DOM 操作，讓「大量 composable」的場景下依然高速運作。

VDOM 的渲染系統

但在實際專案中，我們常面對兩種截然不同的架構選擇：SPA (Single Page Application) 與 MPA (Multi Page Application) 。

那麼，Vapor Mode 在這兩種架構下會有什麼差異？ 以及，我們要該如何取捨？

SPA vs MPA 的基本差異

Vapor 的定位：Vapor 以「編譯期生成 + 直接 DOM 操作」為核心，對 SPA / MPA 的效能瓶頸會產生不同影響。

Vapor Mode 在 SPA 下的優勢

在 SPA 中，所有互動都發生在前端，Vue 必須長時間維護整個應用的響應系統。

這時 Vapor 的「跳過 Virtual DOM」特性，能直接帶來優勢以及挑戰：

優勢

• 長時間運行優化：
  SPA 需要長期維護大量活躍的元件，Vapor 省下 Virtual DOM 的 diff 成本，長時間互動更省資源。

• 大量 composable 加速：
  例如 Pinia store、VueUse 工具在 Vapor 下的 effectScope 管理更高效。

挑戰

• 初次載入體積：
  SPA 仍需一次打包所有頁面，Vapor 本身編譯產物雖小，但組件數量多時仍要靠 code-splitting 配合。

• 開發者工具支援：
  Vapor 需要搭配最新版 Vue Devtools 與 Vite plugin 才能完整檢測。

實作

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue(/* { vapor: true } */)]
})

• Lazy Scope：拆分 effectScope 以減少全域追蹤。

• Route-level split：每個 route 對應獨立 chunk。

Vapor Mode 在 MPA 的特殊挑戰

MPA 的頁面切換是整頁重新載入，理論上每個頁面都是一個獨立 Vue 應用。

這讓 Vapor 有兩個潛在影響：

優勢

• 首屏更快：
  每頁都是獨立 entry，Vapor 的純 DOM patch 讓初次渲染更接近傳統靜態頁速度。

• SEO 天然加分：
  沒有 Virtual DOM 的 client hydration 成本，配合 SSR 甚至可達到接近靜態頁的體驗。

挑戰

• 共用狀態：
  因為每頁重新載入，Pinia 或 composable 無法跨頁持久化，需要透過 server session / cookie。

• 構建策略：
  多 entry build 時要確保每頁都啟用 Vapor，避免混用導致不一致。

實作

// vite.config.ts (MPA)
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: './src/index.html',
        about: './src/about.html'
      }
    }
  }
})
// 每個 entry 的 main.ts 啟用 Vapor

MPA 如果頁面間共享大量狀態 (例如登入態、全域設定)，仍建議透過 Pinia + Vapor 進行集中管理，避免重複初始化造成效能浪費。

架構選擇

小結

Vapor Mode 帶來的效能優勢，在 SPA 架構 下最為直接；但在 MPA 中，雖然仍能受惠於跳過 Virtual DOM 的優化，但初始化成本與部署複雜度成為主要挑戰唷！

參考資料

1. SPA vs. MPA Comparison
2. Single-page Applications: Understanding the Basics
3. Vue 3.6: Vapor Mode opening virtual DOM era
4. Vapor Mode in Vue.js 3: New Opportunities and Challenges
5. The Future of Vue: Vapor Mode