從前端效能優化開始：用實戰技巧讓大型後台網頁快起來的實戰指南

如果你正在維護像 CSF 這種基於 Vben Admin 的大型後台管理系統，隨著資產管理、告警管理、日誌檢索、情報營運大屏等模組不斷堆疊，你可能已經遇到過這些情況：首屏轉圈十幾秒才出來、切換頁面卡頓、幾千筆資料一滾就掉幀。這篇文章就是為「已經會寫功能、但開始被效能拖後腿」的前端開發者寫的——我們不談空泛理論，直接上可落地的實戰技巧。

一、先量測再優化：用指標找到真正的瓶頸

效能優化最忌諱「憑感覺動刀」。優化前先打開瀏覽器開發者工具的 Performance 與 Network 面板，看清楚是「載入慢」還是「渲染慢」。

• 白屏久：通常是打包體積過大、首屏載入了全部路由。
• 互動卡：多半是長列表未虛擬化、或頻繁重算。
• 切頁慢：可能是重複請求，缺少快取。

二、路由級程式碼分割：讓首屏只載入「看得見的」

Vite + Vue Router 預設支援動態 import，把每個路由拆成獨立 chunk，使用者進哪頁才載哪頁：

// router/index.ts
{
  path: '/alarm',
  name: 'Alarm',
  component: () => import('@/views/alarm/index.vue'),
  meta: { title: '告警管理' },
}

重點：不要把所有頁面都靜態 import 進同一個 bundle，否則首屏就得下載整座後台。

三、依賴瘦身與手動分包：砍掉不必要的重量

第三方套件（如圖表庫、Excel 匯出、編輯器）體積驚人。用 vite.config.ts 的 manualChunks 把穩定大依賴拆出去，並善用瀏覽器長期快取：

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        echarts: ['echarts'],
        xlsx: ['xlsx'],
        'vue-vendor': ['vue', 'pinia', 'vue-router'],
      },
    },
  },
}

重點：變動頻率低的大套件獨立成 vendor chunk，使用者二次訪問時幾乎零等待。

四、長列表用虛擬滾動：萬筆資料也不卡

告警清單、資產清單動輒數千筆，全部渲染會拖垮瀏覽器。用虛擬滾動只渲染「視窗內」的幾十筆：

// 使用 vben 的 BasicTable 虛擬化或 @vueuse/components 的 VirtualList
<a-table
  :columns="columns"
  :data-source="list"
  :scroll="{ y: 480 }"
  :virtual="true"
/>

重點：清單超過 200 筆就該考慮虛擬化，這是後台效能提升最顯著的一招。

五、運行時防抖節流與快取：把重複運算擋在門外

搜尋框每敲一個字就發請求、圖表 resize 瘋狂重繪，都是效能殺手。用防抖（debounce）與節流（throttle）控管頻率：

import { debounce, throttle } from 'lodash-es';

const onSearch = debounce((kw: string) => {
  fetchList(kw);
}, 300);

const onResize = throttle(() => {
  chart.resize();
}, 200);

同時，對不常變的介面資料（如下拉選項、資源類型對應表）用 Pinia 或 localStorage 快取，避免每次進頁都重新拉取。

六、小結：效能是「持續工程」而非一次任務

把上述技巧組合起來：路由懶加載 + vendor 分包 + 長列表虛擬化 + 防抖節流快取，CSF 這類大型後台的首屏與互動體驗通常能提升數倍。記住：先量測、再動刀、上線後持續監控，才是穩健的效能文化。

互動話題：你在維護大型後台時，最頭痛的效能瓶頸是首屏載入、長列表，還是圖表渲染？歡迎在留言區分享你的解法！