官方核心插件功能介绍

Vite.js 作为现代前端构建工具，其核心插件系统是扩展功能的关键。官方插件覆盖了开发、构建、优化等核心场景，通过插件机制可以无缝集成各种工具链。

内置插件体系

Vite 的内置插件在 vite/dist/node/plugins 目录实现，分为以下几类：

1. 基础服务插件：如 vite:client-inject 负责注入 HMR 客户端脚本
2. 构建优化插件：如 vite:build-html 处理 HTML 入口文件
3. 框架适配插件：如 vite:vue 提供 Vue 单文件组件支持

典型配置示例：

// vite.config.js
export default {
  plugins: [
    vue(), 
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

开发环境插件

HMR 热更新

vite:hmr 插件实现基于 WebSocket 的热模块替换：

// 客户端热更新逻辑
if (import.meta.hot) {
  import.meta.hot.accept('./module.js', (newModule) => {
    console.log('模块更新:', newModule)
  })
}

文件系统监听

vite:watch 插件使用 chokidar 实现高效文件监听：

watcher.on('change', (file) => {
  if (file.endsWith('.vue')) {
    handleVueReload(file)
  }
})

生产构建插件

资源处理

vite:asset 插件处理静态资源：

// 配置示例
{
  assetsInclude: ['**/*.gltf'],
  build: {
    assetsInlineLimit: 4096 // 4KB 以下资源转 base64
  }
}

代码分割

vite:split 插件实现动态导入拆分：

// 组件懒加载
const Login = () => import('./Login.vue')

框架支持插件

Vue 插件

@vitejs/plugin-vue 提供完整 Vue 支持：

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

export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true // 启用响应性语法糖
    })
  ]
})

React 插件

@vitejs/plugin-react 支持 Fast Refresh：

// vite.config.js
import react from '@vitejs/plugin-react'

export default {
  plugins: [
    react({
      jsxRuntime: 'automatic' // 新版 JSX 转换
    })
  ]
}

高级功能插件

多页面应用

vite:multi-page 支持多入口配置：

{
  build: {
    rollupOptions: {
      input: {
        main: 'index.html',
        admin: 'admin.html'
      }
    }
  }
}

WASM 支持

vite:wasm 插件处理 WebAssembly：

import init from './module.wasm?init'

init().then((exports) => {
  exports._fibonacci(42)
})

性能优化插件

预构建

vite:optimize 自动处理依赖预构建：

# 生成的预构建文件存储在
node_modules/.vite/deps

PWA 支持

vite-plugin-pwa 实现离线缓存：

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,png}']
      }
    })
  ]
}

调试辅助插件

可视化分析

rollup-plugin-visualizer 集成：

import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [
    visualizer({
      open: true,
      gzipSize: true
    })
  ]
}

检查器插件

vite-plugin-inspect 调试中间状态：

# 启动后访问
http://localhost:3000/__inspect/