相信已经有不少小伙伴已经开始用 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 的项目模板，模板里默认集成了上面介绍的所有插件。
