結論先講
前端選生態不選效能，6 分差距不值得換框架。 Lighthouse 93-99 分的差距在真實用戶體驗中幾乎感覺不到，但 React 和 Vue 的生態系——套件數量、社群支援、招人難度——差距是數量級的。Svelte 的 326KB bundle 確實漂亮，但 Angular 的 784KB 在 HTTP/2 + gzip 下也只多 100ms。你的時間應該花在商業邏輯上，不是追逐框架效能排名。
數據總覽
Lighthouse 評分（差距只有 6 分）
| 框架 | Lighthouse 總分 | LCP | Bundle Size | 篇章 |
|---|---|---|---|---|
| Svelte | 99 | 1.82s | 326KB | [[micro-service/15-f2e-lighthouse-ranking|#15]] |
| Vue | 97 | 1.69s | 412KB | [[micro-service/15-f2e-lighthouse-ranking|#15]] |
| React | 96 | 1.91s | 487KB | [[micro-service/15-f2e-lighthouse-ranking|#15]] |
| Angular | 93 | 2.12s | 784KB | [[micro-service/15-f2e-lighthouse-ranking|#15]] |
Vue 的 LCP 1.69 秒是最快的，但它和 React 只差 0.22 秒——用戶分不出來。
Bundle Size 才是真正的差異
Svelte 326KB vs Angular 784KB 差了 2.4 倍，但這個差距要放在context 裡看：
- gzip 壓縮後：差距縮小到 1.5 倍
- HTTP/2 多路傳輸：大 bundle 的劣勢被大幅削弱
- CDN cache 後：回訪用戶根本不重新下載
Bundle size 真正影響的是首次載入 + 低速網路的場景。如果你的用戶 90% 在都市用 4G/WiFi，這個差距可以忽略。
渲染策略比較
| 策略 | 適用場景 | LCP 表現 | Server 壓力 | 篇章 |
|---|---|---|---|---|
| CSR | SPA、管理後台 | 中等 | 低 | [[micro-service/16-f2e-render-strategy|#16]] |
| SSR | SEO 需求、內容站 | 快 | CPU +30~50% | [[micro-service/16-f2e-render-strategy|#16]] |
| SSG | 部落格、文件站 | 最快 | 零 | [[micro-service/16-f2e-render-strategy|#16]] |
| Islands | 大量靜態 + 少量互動 | 視情況 | 低 | [[micro-service/16-f2e-render-strategy|#16]] |
Astro Islands 的陷阱：它在大量靜態內容的頁面表現優秀，但拿來做 SPA 類應用時 LCP 超過 2.5 秒，反而比純 CSR 還慢。Islands 不是銀彈——它是給內容網站設計的。
最終推薦矩陣
按團隊規模
| 團隊 | 推薦 | 原因 |
|---|---|---|
| 1-2 人獨立開發 | Vue 3 或 Svelte | 學習曲線低、開發體驗好 |
| 3-5 人小團隊 | React | 招人容易、套件最多 |
| 10+ 人大團隊 | React 或 Angular | 強型別 + 嚴格架構降低溝通成本 |
按專案類型
| 專案類型 | 推薦框架 | 推薦渲染策略 |
|---|---|---|
| 管理後台 / Dashboard | React + Ant Design | CSR |
| 內容網站 / 部落格 | Astro 或 Next.js | SSG / Islands |
| 電商 / SEO 重要 | Next.js (React) 或 Nuxt (Vue) | SSR + ISR |
| SPA 應用 | Vue 3 或 React | CSR |
| 效能極端敏感（IoT、低階裝置） | Svelte | CSR |
不要做的事
- 不要為了 6 分 Lighthouse 換框架——遷移成本是效能收益的 100 倍
- 不要在 SPA 場景用 Islands——它不是為這個設計的
- 不要因為 bundle size 排斥 Angular——如果團隊已經熟 Angular，它的嚴格架構在大型專案反而是優勢
- 不要把 SSR 當預設——它增加 30-50% server CPU，小流量站根本不需要
回到數據
這些結論來自兩篇壓測文章的實際數據：
- [[micro-service/15-f2e-lighthouse-ranking|#15 前端框架 Lighthouse 排名]]——6 個框架的完整評分
- [[micro-service/16-f2e-render-strategy|#16 渲染策略比較]]——CSR、SSR、SSG、Islands 的實際表現
以及 [[micro-service/62-optimization-roadmap|#62 最佳化路線圖]] 的最終排序：前端優化排在 Tier 4，因為 ROI 遠低於後端和資料庫的調整。
把時間花在 Tier 1（Pool + Bulk + Index）能拿到 5-10 倍提升。花在前端框架切換上，最多拿到 6 分。
下一篇
B2E 結論：後端框架最終推薦 — 前端結論完，接下來是後端——9 個框架 × 5 場場景的最終排名和推薦。
本系列文章
完整 68 篇目錄見 系列首頁
← 上一篇：最佳化路線圖：五層結論 + 該先做什麼後做什麼 → 下一篇：B2E 結論：後端框架最終推薦與場景對照