Vite Build Tooling

Configure and optimize Vite for modern web projects. Generates vite.config files, custom plugins, library mode builds, SSR configurations, environment handling, and performance optimizations.

This skill helps you master Vite's build tooling for frontend projects. It generates advanced vite.config.ts configurations, creates custom Vite plugins with transform hooks, configures library mode for publishing npm packages, sets up SSR with streaming, implements module federation, optimizes chunk splitting strategies, and configures environment variables securely. Covers Vitest integration, Vite 6 Environment API, and Rolldown migration.

When to use

Use when configuring Vite for complex projects, writing custom plugins, optimizing build performance, setting up library mode, or migrating from Webpack to Vite.

Examples

Library mode

Configure Vite for publishing an npm package

Configure Vite in library mode for a React component library with TypeScript declarations, CSS modules, tree-shaking, and both ESM and CJS output

Custom plugin

Write a Vite plugin for auto-importing

Create a custom Vite plugin that auto-generates barrel files for component directories and adds virtual modules for icon sprite sheets