一、修好建置會失敗的問題

昨天其實vercel部署失敗，原因鎖定在「多餘參數」和舊版3D套件。今天一次把多餘參數清掉，順手把3D套件升到新版，照著新API把寫法整理乾淨。

關鍵修改

• 移除無用參數
• 升級 3D 套件版本
• 改成新版 API 風格

二、3D套件與背景動畫改成延遲載入

首頁載入期間會出現一個自訂的 Loading 畫面，避免空白。

// 原本：進場就 import
import { createSphere } from '@/three/sphere'

// 現在：用到再載
const { createSphere } = await import('@/three/sphere')

三、全站間距統一

把「Navbar與內容區」的距離統一成統一規格，聊天、設定、計時、動態牆、個人頁、完成紀錄都吃同一組間距。

做法

• 新增全域間距變數，主版面統一吃同一套

:root {
  --layout-top-gap: 4.5rem;
}
.main {
  padding-top: var(--layout-top-gap);
}

四、打包優化

把3D套件與背景動畫拆成獨立分包，減少首頁一次塞太多的壓力。

首頁更快進場，後續載入3D或動畫時也比較順。

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          three: ['three'],
          bgfx: ['@/utils/animation']
        }
      }
    }
  }
})