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

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

posted @ 2021-09-01 08:46  胡尐睿丶  阅读(2189)  评论(3编辑  收藏  举报