簡介

我們這次討論關於性能優化的部分，以及一般開發人員在進行開發的時候要注意的事情。本文將深入探討如何利用 Vite 以及 Vue 的各種特性來優化應用性能。我們還將討論如何進行相關的測試。

步驟 1: 配置 UnoCSS 和 Vite

首先，讓我們配置 UnoCSS 和 Vite 以優化打包大小：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), Unocss()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    },
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.indexOf('node_modules') !== -1) {
            return id.split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
})```

這個配置使用 UnoCSS 的預設設置，並添加了一些自定義的快捷方式。同時，它優化了 Vite 的構建過程，移除了生產環境中的 console 和 debugger 語句，並將第三方依賴分離成單獨的 chunk。

`備註`: vite 需要裝 `terser` 才可以針對打包做壓縮

```sh
bun add -D terser

步驟 2: 使用 Vue 的性能優化特性

Vue 提供了多種特性來優化性能。讓我們看看如何使用它們：

v-once

對於只需要渲染一次的內容，使用 v-once 指令：

<template>
  <div v-once>{{ expensiveComputation() }}</div>
</template>

v-memo

使用 v-memo 來跳過不必要的更新：

<template>
  <div v-memo="[item.id]">
    {{ item.name }}
  </div>
</template>

keep-alive

對於需要頻繁切換的組件，使用 keep-alive 來緩存實例：

<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

v-if vs v-show

• 使用 v-if 當條件很少改變，或者切換開銷較大時。
• 使用 v-show 當需要頻繁切換時。

<template>
  <div v-if="rarelySwitches">Expensive Component</div>
  <div v-show="frequentlySwitches">Light Component</div>
</template>

步驟 3: 使用 defineAsyncComponent

對於大型組件或不是立即需要的組件，使用 defineAsyncComponent 進行懶加載：

import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)

步驟 4: 優化 Pinia Store

將大型 store 拆分成多個模塊，並使用 defineStore 的組合式 API 寫法：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const name = shallowRef('')
  const isLoggedIn = shallowRef(false)

  function login(userName: string) {
    name.value = userName
    isLoggedIn.value = true
  }

  return { name, isLoggedIn, login }
})

步驟 5: 使用 Vitest 和 @vue/test-utils 進行測試

創建一個測試文件來測試性能關鍵組件：

// PerformanceCriticalComponent.spec.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import PerformanceCriticalComponent from './PerformanceCriticalComponent.vue'

describe('PerformanceCriticalComponent', () => {
  it('renders efficiently', async () => {
    const start = performance.now()
    const wrapper = mount(PerformanceCriticalComponent)
    const end = performance.now()
    
    expect(end - start).toBeLessThan(50) // 假設我們期望渲染時間小於 50ms
    expect(wrapper.find('.critical-content').exists()).toBe(true)
  })

  it('updates efficiently', async () => {
    const wrapper = mount(PerformanceCriticalComponent)
    const start = performance.now()
    await wrapper.setProps({ someProps: 'newValue' })
    const end = performance.now()

    expect(end - start).toBeLessThan(10) // 假設我們期望更新時間小於 10ms
  })
})

步驟 6: 其他性能優化技巧

1. 使用 computed 屬性來緩存複雜計算的結果。

2. 使用 watchEffect 而不是 watch 來自動追蹤依賴。

3. 使用 Web Workers 處理複雜計算：

// worker.js
self.addEventListener('message', (e) => {
  if (e.data.action === 'heavyCalculation') {
    const result = performHeavyCalculation(e.data.payload)
    self.postMessage(result)
  }
})

// 在 Vue 組件中使用
const worker = new Worker(new URL('./worker.js', import.meta.url))
worker.postMessage({ action: 'heavyCalculation', payload: data })
worker.onmessage = (e) => {
  // 處理計算結果
}

4. 使用虛擬滾動來處理大列表。

結論

通過利用 UnoCSS、Vite 和 Vue 的各種性能優化特性，我們可以顯著提升應用的性能。關鍵點包括：

1. 使用 UnoCSS 和 Vite 優化打包大小和加載速度。
2. 合理使用 Vue 的 v-once、v-memo、keep-alive 等特性。
3. 使用 defineAsyncComponent 進行組件懶加載。
4. 正確選擇 v-if 和 v-show。
5. 優化路由和 Pinia store。
6. 進行全面的性能測試。

記住，性能優化是一個持續的過程。定期使用性能分析工具（如 Chrome DevTools 的 Performance 面板和 Lighthouse）來監控你的應用性能，並根據實際情況進行針對性的優化。同時，在追求性能的同時，也要平衡代碼的可讀性和可維護性。