先说明一下：标题提到的Vite 3.0/4.0在本文写作时（2022年1月）尚未正式发布。Vite目前的稳定版本是2.x，3.0预计在2022年中发布。本文基于Vite 2.x的使用经验，推荐Vite生态中能提升开发效率的工具和插件，同时展望未来版本可能带来的改进。

Vite是Vue作者尤雨溪开发的新一代前端构建工具，以其极快的冷启动和热更新（HMR）著称。它利用浏览器原生ES模块，开发时不需要打包，启动速度比Webpack快很多。这两年Vite越来越火，很多新项目都开始用Vite，甚至一些老项目也在迁移。

我用Vite做了几个项目，深深感受到了它的快。但Vite本身只是一个构建工具，要发挥最大效率，还需要配合各种插件和工具。今天推荐10个我觉得很实用的Vite工具和插件，帮你提升开发效率。

一、Vite为什么快

在推荐工具之前，先简单说说Vite为什么快，这样你能更好地理解这些工具的作用。

传统的构建工具（比如Webpack）在开发时需要先把所有模块打包成一个bundle，然后启动开发服务器。项目越大，打包越慢，启动一次可能要几十秒甚至几分钟。

Vite的做法不一样。它在开发时利用浏览器原生的ES模块支持，不需要打包。浏览器请求哪个模块，Vite就实时编译哪个模块，按需提供。所以不管项目多大，冷启动都是毫秒级的。

热更新也很快。Vite只需要重新编译变更的模块，然后通过WebSocket通知浏览器更新，不需要刷新整个页面，也不需要重新打包。

这种"按需编译"的模式，让Vite在开发体验上远超传统构建工具。

二、推荐的Vite工具和插件

1. @vitejs/plugin-vue

如果你用Vue 3，这个插件是必备的。它是Vite官方的Vue插件，提供Vue单文件组件（SFC）的支持。

安装和配置很简单：

npm install @vitejs/plugin-vue -D
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

这个插件支持Vue 3的所有特性，包括<script setup>语法、JSX、自定义块等。用Vite + Vue 3，开发体验非常流畅。

2. @vitejs/plugin-react

如果你用React，官方也有对应的插件@vitejs/plugin-react。它提供React Fast Refresh支持，热更新体验很好。

npm install @vitejs/plugin-react -D
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

React项目用Vite，启动速度比Create React App快很多，推荐试试。

3. unplugin-auto-import

这是一个非常实用的插件，能自动导入API，不用手动import。比如Vue 3的ref、computed、onMounted等，以前每个组件都要写：

import { ref, computed, onMounted } from 'vue'

用了unplugin-auto-import之后，直接用就行，插件会自动导入。代码更简洁，开发效率更高。

npm install unplugin-auto-import -D
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router']
    })
  ]
})

它支持Vue、React、Svelte等多个框架，也支持自定义导入。强烈推荐。

4. unplugin-vue-components

和auto-import类似，这个插件自动导入Vue组件。以前用组件要先import再注册，现在直接在模板里用就行，插件会自动找到对应的组件文件并导入。

npm install unplugin-vue-components -D
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components']
    })
  ]
})

配合UI组件库（比如Element Plus、Ant Design Vue）使用，还能自动按需导入组件和样式，不用手动引入，也不会全量打包。这两个插件是antfu开发的，质量很高，推荐。

5. vite-plugin-pages

这是一个基于文件系统的路由插件，类似Nuxt.js的路由。你在src/pages目录下创建vue文件，它会自动生成路由配置，不用手动写router。

npm install vite-plugin-pages -D
import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    Pages({
      dirs: 'src/pages'
    })
  ]
})

文件路径就是路由路径，比如src/pages/about.vue对应/about路由，src/pages/user/[id].vue对应/user/:id动态路由。对于中小型项目，这种方式比手动写路由方便很多。

6. vite-plugin-md

如果你需要在项目里用Markdown（比如写文档、博客），这个插件很有用。它能把Markdown文件当成Vue组件来用，支持在Markdown里写Vue组件，也支持在Vue组件里引入Markdown。

npm install vite-plugin-md -D
import Markdown from 'vite-plugin-md'

export default defineConfig({
  plugins: [
    Markdown()
  ]
})

配合vite-plugin-pages，可以快速搭建一个基于文件的博客系统，Markdown文件就是文章，自动生成路由。很方便。

7. vite-plugin-compression

生产构建时，这个插件能自动生成gzip或brotli压缩文件。配合Nginx的gzipstatic或brotlistatic，能大幅减小传输体积，提升页面加载速度。

npm install vite-plugin-compression -D
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    compression({
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
})

构建后会生成对应的.gz文件，Nginx配置好后，浏览器请求时直接返回压缩文件，不用实时压缩，性能更好。

8. vite-plugin-imagemin

图片优化插件，构建时自动压缩图片。支持jpg、png、svg、gif等格式，能显著减小图片体积，提升页面加载速度。

npm install vite-plugin-imagemin -D
import imagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 }
    })
  ]
})

注意这个插件依赖一些二进制包，国内安装可能会慢，可以配置镜像源。但效果很好，图片多的项目推荐用。

9. vite-plugin-mock

开发时经常需要mock数据，这个插件提供了方便的mock功能。在mock目录下写接口，支持RESTful API、动态路由、延迟模拟等，不用起单独的mock服务器。

npm install vite-plugin-mock -D
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: 'mock'
    })
  ]
})

然后在mock目录下写js文件，定义接口：

export default [
  {
    url: '/api/user',
    method: 'get',
    response: () => {
      return { name: '张三', age: 25 }
    }
  }
]

前端直接请求/api/user就能拿到mock数据，开发很方便。

10. VitePress

严格来说VitePress不是插件，而是一个基于Vite的静态站点生成器，专门用来写文档。它由Vue团队开发，速度极快，配置简单，支持Markdown、Vue组件、全文搜索等。

如果你需要写项目文档、技术博客、个人wiki，VitePress是很好的选择。比VuePress更快，配置更简单。

npm install vitepress -D

在docs目录下写Markdown文件，运行vitepress dev docs就能启动开发服务器，vitepress build docs构建静态站点。

三、Vite使用技巧

除了插件，还有一些Vite的使用技巧，能提升效率。

1. 环境变量

Vite内置了环境变量支持。在项目根目录创建.env文件，定义变量：

VITE_API_URL=https://api.example.com

代码里用import.meta.env.VITEAPIURL访问。注意只有VITE_开头的变量才会暴露给客户端。

还可以用.env.development、.env.production区分不同环境。

2. 路径别名

配置路径别名，避免写长长的相对路径：

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

然后import的时候用@/components/xxx，不用写../../components/xxx。

3. 代理配置

开发时跨域问题，用Vite的代理配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})

前端请求/api/xxx会被代理到http://localhost:3000/api/xxx，解决跨域问题。

4. 构建优化

生产构建时，可以配置代码分割、压缩等：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router']
        }
      }
    }
  }
})

把第三方库单独打包成vendor chunk，利用浏览器缓存，提升二次加载速度。

四、对Vite未来版本的展望

虽然Vite 3.0/4.0还没发布，但根据官方的规划和社区的讨论，未来可能会有这些改进：

  • 更快的构建速度：利用esbuild和Rollup的优化，构建速度可能进一步提升
  • 更好的SSR支持：Vite的SSR功能还在完善中，未来可能会更成熟
  • 更丰富的插件生态：随着Vite用户增多，插件会越来越丰富
  • 更好的TypeScript支持：更完善的TS类型和配置
  • Monorepo支持：更好地支持monorepo项目

Vite发展很快，相信未来的版本会越来越好。

五、写在最后

Vite是前端构建工具的一次革新，它的快，用过就回不去了。配合丰富的插件和工具，Vite能让你的前端开发效率提升一个档次。

本文推荐了10个实用的Vite工具和插件，以及一些使用技巧。当然，Vite生态还有很多优秀的工具，这里只是我用过觉得好的一部分。大家可以根据自己的项目需求选择合适的工具。

2022年了，前端工程化还在快速发展，Vite代表了新一代构建工具的方向。如果你还在用Webpack，不妨试试Vite，也许会有惊喜。如果你已经在用Vite，希望这些工具能帮你进一步提升效率。

最后，提醒一句：工具是为了提升效率，不要为了用工具而用工具。选择适合自己项目的，配置好，用起来，才是最重要的。

祝大家开发愉快，构建飞快。