Vite Plugin Explorer

Import each plugin at the top of vite.config.ts and add them to the plugins array inside defineConfig(). Each plugin is called as a function, often with an options object. The order of plugins can matter — transforms are applied in order, and some plugins need to be before or after others.

Vite extends Rollup's plugin API with additional Vite-specific hooks. Most Rollup plugins work in Vite's build mode (using Rollup under the hood), but not all work in dev mode. Rollup plugins prefixed with 'rollup-plugin-' may need to be wrapped or may only run during build. Vite-native plugins work in both dev and build.

Yes. Vite plugins are only used at build time and during development, never at runtime in production. Always install them with 'npm install -D plugin-name' or 'bun add -d plugin-name'. They should appear in the 'devDependencies' section of your package.json.

vite-plugin-pwa automatically generates a Web App Manifest and Service Worker for your Vite app, turning it into a Progressive Web App (PWA) that can be installed on devices and work offline. Use it when you want offline support, push notifications, or app-like installation for your web app.

rollup-plugin-visualizer generates an interactive treemap HTML report showing your bundle composition — which packages take up how much space. It's invaluable for identifying large dependencies, duplicate code, and optimization opportunities. Run 'npx vite build' and then open the generated stats.html file.

Generally no — framework plugins like @vitejs/plugin-react and @vitejs/plugin-vue each take over JSX/SFC transformation for their framework. You can't use both React and Vue plugins in the same project. However, utility plugins (PWA, compression, SVG, etc.) work alongside any framework plugin.