收下这7款插件，让你在使用vite的时候如虎添翼

Posted 2021-09-01 Hooray

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