相信已經有不少小夥伴已經開始用 Vue3 做開發了，也一定使用上 Vite 了，而我今天要介紹的這幾款外掛，能讓你在使用 Vite 做開發時如虎添翼。
vite-plugin-restart
通過監聽檔案修改，自動重啟 vite 服務。
最常用的場景就是監聽 vite.config.js 和 .env.development 檔案，我們知道，修改 vite 配置檔案和環境配置檔案，是需要重啟 vite 才會生效，通過這個外掛，我們將從反覆重啟中解脫出來。
unplugin-vue-components
元件自動按需匯入。
按照官方的例子，我們可以直接在程式碼中呼叫元件，而無需匯入並註冊，這個外掛會自動幫助我們做這些事，你可以直接這樣編寫程式碼：
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
而程式碼最終會編譯成這樣：
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
<script>
import HelloWorld from './src/components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
這個外掛基本讓我們告別全域性元件註冊了，因為有時候為了偷懶，我們會將元件註冊到全域性，這樣在使用的時候就無需匯入並註冊，弊端就是如果全域性元件過多會導致首頁載入較慢，而這個外掛就很巧妙的解決了這一問題。
vite-plugin-svg-icons
用於生成 svg 雪碧圖，方便在專案中使用 .svg 檔案。
按照文件配置好後，搭配阿里巴巴向量圖示庫使用，只需把下載好的 svg 檔案丟到指定目錄，然後就可以專案中愉快的使用了。
vite-plugin-spritesmith
css 雪碧圖生成。
這是一個瀕臨淘汰的技術，因為 HTTP/2 裡多路複用特性，已經不太需要使用精靈圖合併了。當然如果你依舊有這使用需求，這個外掛可以滿足你的需要。
vite-plugin-mock
提供了本地和生產 mock 服務。
優勢在於本地使用，與傳統使用 mockjs 不同，是可以真實在瀏覽器裡看到請求記錄，大大提高了開發效率。
vite-plugin-html
一個針對 index.html，提供壓縮和基於 ejs 模板功能的 vite 外掛。
通過搭配 .env 檔案，可以在開發或構建專案時，對 index.html 注入動態資料，例如替換網站標題。
vite-plugin-compression
使用 gzip 或者 brotli 來壓縮資源。
這個不用多介紹了，可以讓專案在構建時直接生成壓縮檔案。
最後
上面介紹的這 7 款 vite 外掛，如果有超過一半的外掛你打算嘗試使用的話，建議你可以瞭解下 Fantastic-template 這款基於 vue3 + vite2 的專案模板，模板裡預設整合了上面介紹的所有外掛。