Vite's Plugin System: Extending Dev and Build

Why it exists

Vite provides fast, out-of-the-box support for common web patterns, but no single tool can cover every project's specific needs. The plugin system exists to provide a standardized way to extend Vite's core functionality, from transforming source code to adding custom server middleware, without bloating the core tool itself.

The mental model

Think of Vite's plugin system as a set of hooks into its development server and build pipeline. Because it's based on the well-established Rollup plugin API, you get access to a huge ecosystem of existing tools that work with Vite. Vite supercharges this API with its own hooks, giving you control over the dev server and server-side rendering, not just the final bundle.

How it works

You add a plugin to your project's devDependencies and then import it into your vite.config.js file, adding it to the plugins array. Configuration happens through options passed to the plugin function. For more control, you can use two key properties: apply and enforce. apply: 'serve' or apply: 'build' restricts the plugin to run only during development or production builds, respectively. enforce: 'pre' or enforce: 'post' forces a plugin to run before or after Vite's core plugins, which is crucial for resolving compatibility issues.

When to use it

Use plugins when Vite's built-in features aren't enough. Common scenarios include: integrating a specific UI framework (like @vitejs/plugin-react), handling non-standard file types (like @rollup/plugin-image), or adding support for older browsers that lack modern JavaScript features (like @vitejs/plugin-legacy).

When not to use it

Before reaching for a plugin, always check if Vite handles your use case natively. Many tasks that required a plugin in other bundlers, like handling CSS or JSON imports, are built directly into Vite. Overusing plugins for simple tasks can complicate your configuration and potentially slow down your dev server.

One canonical example

To add support for older browsers that don't support modern module syntax, you can use the official legacy plugin. First, install it: npm add -D @vitejs/plugin-legacy. Then, in vite.config.js, import it and add it to the plugins array, specifying which browsers to target. For example: plugins: [legacy({ targets: ['defaults', 'not IE 11'] })]. This tells Vite to generate a separate legacy bundle and polyfills during the build process.