社区插件集成

Vite 拥有丰富的社区插件生态，扩展构建功能满足各种需求。

搜索插件

• npm 搜索 vite-plugin 关键词
• GitHub 搜索 vite-plugin 仓库
• Awesome Vite 插件列表

安装插件

# 示例插件
npm add -D vite-plugin-compression
npm add -D vite-plugin-html
npm add -D vite-plugin-imagemin

配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    compression({
      algorithm: 'gzip',
      threshold: 10240
    })
  ]
})

常用社区插件

判断插件兼容性

// 检查插件是否支持 Vite
// 1. 查看 package.json peerDependencies 是否包含 vite
// 2. 查看 README 文档说明
// 3. 测试实际运行效果

注意：部分 Rollup 插件也可在 Vite 中使用。

插件配置顺序

export default defineConfig({
  plugins: [
    // 1. 框架插件
    vue(),
    // 2. 功能插件
    compression(),
    // 3. 兜底插件
    legacy()
  ]
})

多插件配置

export default defineConfig({
  plugins: [
    vue(),
    compression({ algorithm: 'gzip' }),
    compression({ algorithm: 'brotliCompress' })
  ]
})

要点总结

• npm 搜索 vite-plugin 关键词
• 安装后在 vite.config.js 配置
• 查看 peerDependencies 判断兼容性
• 部分 Rollup 插件也可使用