Official core plugin features introduction

Vite.js, as a modern front-end build tool, has a core plugin system that is key to extending its functionality. Official plugins cover core scenarios such as development, building, and optimization, allowing seamless integration of various toolchains through the plugin mechanism.

Built-in Plugin System

Vite's built-in plugins are implemented in the vite/dist/node/plugins directory and are categorized as follows:

1. Core Service Plugins: For example, vite:client-inject is responsible for injecting HMR client scripts.
2. Build Optimization Plugins: For example, vite:build-html handles HTML entry files.
3. Framework Adaptation Plugins: For example, vite:vue provides support for Vue single-file components.

Typical configuration example:

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

Development Environment Plugins

HMR Hot Module Replacement

The vite:hmr plugin implements WebSocket-based hot module replacement:

// Client-side HMR logic
if (import.meta.hot) {
  import.meta.hot.accept('./module.js', (newModule) => {
    console.log('Module updated:', newModule)
  })
}

Filesystem Watching

The vite:watch plugin uses chokidar for efficient file watching:

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

Production Build Plugins

Asset Handling

The vite:asset plugin handles static assets:

// Configuration example
{
  assetsInclude: ['**/*.gltf'],
  build: {
    assetsInlineLimit: 4096 // Assets under 4KB are converted to base64
  }
}

Code Splitting

The vite:split plugin implements dynamic import splitting:

// Lazy-loaded component
const Login = () => import('./Login.vue')

Framework Support Plugins

Vue Plugin

@vitejs/plugin-vue provides full Vue support:

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

export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true // Enable reactivity transform
    })
  ]
})

React Plugin

@vitejs/plugin-react supports Fast Refresh:

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

export default {
  plugins: [
    react({
      jsxRuntime: 'automatic' // Modern JSX transform
    })
  ]
}

Advanced Feature Plugins

Multi-Page Application

vite:multi-page supports multi-entry configuration:

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

WASM Support

vite:wasm plugin handles WebAssembly:

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

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

Performance Optimization Plugins

Pre-Bundling

vite:optimize automatically handles dependency pre-bundling:

# Pre-bundled files are stored in
node_modules/.vite/deps

PWA Support

vite-plugin-pwa implements offline caching:

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

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

Debugging Assistance Plugins

Visualization Analysis

rollup-plugin-visualizer integration:

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

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

Inspector Plugin

vite-plugin-inspect debugs intermediate states:

# Access after startup
http://localhost:3000/__inspect/