相信已經有不少小伙伴已經開始用 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 的項目模板，模板里默認集成了上面介紹的所有插件。