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