單頁面應用（SPA）首屏加載優化方案

首屏加載優化是單頁面應用（SPA，如 Vue/React）的核心性能指標，用戶進入的第一個頁面大多是是首頁，這也是用戶體驗的重要指標。
那么一般是哪些方面入手呢？主要從資源優化（資源體積控制）、服務器優化（網絡傳輸優化）、加載優化（代碼執行效率）、渲染優化（渲染管線優化）、瀏覽器優化（瀏覽器機制利用）這幾個方面/維度入手，以下我列了幾個點簡單描述下，詳細具體可以各自上網查資料或問 AI。

1. 代碼分割（Code Splitting）

原理

現代前端框架（如 Vue、React）通常使用 Webpack 進行打包。默認情況下，所有代碼會被打包成一個大的 JavaScript 文件，導致首屏加載緩慢。代碼分割可以將不同模塊拆分成獨立的文件，按需加載，減少首屏 JavaScript 體積，且組件使用引入有先后順序。

優化方案

• 按需加載組件：使用 Webpack import() 進行動態導入。
• Vue Router 懶加載：對于路由組件，采用懶加載方式。

示例（Vue Router 懶加載）：

const Home = () => import("@/views/Home.vue");
const About = () => import("@/views/About.vue");

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

2. 預加載與預請求（Preload & Prefetch）

原理

• preload：優先加載當前頁面可能用到的資源。
• prefetch：低優先級加載未來可能訪問的資源。

優化方案

在 Vue Router 中，可以通過 webpackPrefetch 和 webpackPreload 進行優化。

示例：

const Home = () => import(/* webpackPrefetch: true */ "@/views/Home.vue");
const About = () => import(/* webpackPreload: true */ "@/views/About.vue");

3. 服務器端渲染（SSR）與靜態站點生成（SSG）

原理

• SSR（Server-Side Rendering）：服務器預渲染 HTML，提高首屏速度。
• SSG（Static Site Generation）：預生成 HTML，提高靜態資源訪問速度。

優化方案

• 使用 Nuxt.js 實現 Vue SSR 或 SSG。
• 使用 generate 生成靜態 HTML。

4. 使用 HTTP/2 或 HTTP/3

原理

• HTTP/2 支持多路復用，減少請求阻塞，提高并發加載能力。
• HTTP/3 進一步優化了丟包恢復，提高性能。

優化方案

• 確保服務器支持 HTTP/2（Nginx 配置 http2 on;）。
• 采用 link rel="preload" 預加載關鍵資源。

5. 啟用 Gzip 或 Brotli 壓縮

原理

Gzip 和 Brotli 可以有效減少 HTML、CSS、JS 體積，提高加載速度。

優化方案

• 在 Nginx 或 Apache 服務器中啟用 Gzip/Brotli。
• 在 Webpack 配置 compression-webpack-plugin 進行構建時壓縮。

6. 減少 JS 體積/圖片體積

優化方案

• 使用 webpack-bundle-analyzer 檢查包大小。
• 按需引入第三方庫（如 lodash-es 代替 lodash）。
• 替換更小的庫，如 dayjs 代替 moment.js。
• 圖片減肥：PNG 轉 WebP、大圖用 CDN 縮略圖（原圖 2MB → 壓縮后 200KB）

7. 使用 CDN 加速

優化方案

• 將 Vue、Axios、Vuex 等核心庫使用 CDN 加載。
• 示例：

<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.prod.js"></script>

8. Skeleton（骨架屏）

原理

在頁面加載時，使用骨架屏占位，提升用戶體驗。

優化方案

• Vue 組件中使用 v-if 或 v-show 控制骨架屏。
• 示例：

<template>
  <div v-if="loading" class="skeleton"></div>
  <div v-else class="content">內容加載完成</div>
</template>

9. 延遲加載非關鍵資源（Lazy Load）

優化方案

• 只加載首屏必要內容，其他內容延遲加載。
• Vue 中使用 v-lazy 進行圖片懶加載。

10. Service Worker（PWA 支持）

原理

Service Worker 允許 SPA 緩存資源，實現離線訪問。

優化方案

• 使用 Workbox 進行 Service Worker 注冊。
• 示例：

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

11. 本地存儲緩存

優化方案

• 使用 localStorage、sessionStorage 或 IndexedDB 作為數據緩存。
• 示例：

localStorage.setItem("userData", JSON.stringify(user));
const data = JSON.parse(localStorage.getItem("userData"));

總結

• 第一次訪問：拆包裹、用壓縮、提前搬
• 重復訪問：靠緩存、走高速
• 讓用戶感覺快：先給看毛坯房（骨架屏），后臺偷偷裝修（加載資源）

通過以上優化方案，可以有效減少 SPA 首屏加載時間，提升用戶體驗。