Vite

Vite is a community skill for using the Vite build tool, covering development server configuration, build optimization, plugin system, module resolution, and production bundling for fast modern web application development.

What Is This?

Overview

Vite provides guidance on building web applications using the Vite development and build tool. It covers development server configuration that serves modules using native ES imports with instant hot module replacement for rapid iteration, build optimization that produces minified and tree-shaken production bundles using Rollup with code splitting and asset handling, plugin system integration that extends Vite with framework support, asset transforms, and custom build steps through a Rollup-compatible plugin API, module resolution that handles TypeScript, JSX, CSS modules, and static assets with zero configuration defaults, and environment variable management that separates development and production configuration with secure client-side variable exposure. The skill helps developers build modern web applications with instant development feedback loops and optimized production output bundles.

Who Should Use This

This skill serves frontend developers building React, Vue, or Svelte applications, teams migrating from webpack to a faster development experience, and library authors using Vite for building and testing.

Why Use It?

Problems It Solves

Webpack-based development servers become slow as projects grow due to full bundle rebuilds. Configuring module resolution for TypeScript, CSS modules, and static assets requires extensive manual setup. Hot module replacement in traditional bundlers loses state or requires full page reloads. Production build optimization needs manual configuration of code splitting, tree shaking, and asset handling.

Core Highlights

Dev server serves native ES modules with instant hot module updates. Build engine produces optimized production bundles via Rollup. Plugin system extends build functionality with Rollup-compatible plugin hooks. Module resolver handles TypeScript, JSX, CSS, and static assets by default.

How to Use It?

Basic Usage

// vite.config.ts
import { defineConfig } from
  'vite';
import react from
  '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target:
          'http://localhost'
          + ':8080',
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: [
            'react',
            'react-dom']
        }
      }
    }
  }
});

Real-World Examples

// Custom plugin and
// environment config
import { defineConfig,
  loadEnv } from 'vite';

export default defineConfig(
  ({ mode }) => {
    const env = loadEnv(
      mode, process.cwd());

    return {
      define: {
        __APP_VERSION__:
          JSON.stringify(
            env.VITE_VERSION)
      },
      css: {
        modules: {
          localsConvention:
            'camelCase'
        },
        preprocessorOptions: {
          scss: {
            additionalData:
              `@use "vars";`
          }
        }
      },
      resolve: {
        alias: {
          '@': '/src'
        }
      }
    };
  });

Advanced Tips

Use manual chunks to separate vendor libraries into stable cache-friendly bundles. Configure path aliases in both vite.config.ts and tsconfig.json for consistent module resolution. Use the library mode for building reusable packages with proper external dependency handling.

When to Use It?

Use Cases

Set up a React application with TypeScript, CSS modules, and API proxy for development. Configure production builds with code splitting and vendor chunk optimization. Build a component library with library mode and external peer dependencies.

Related Topics

Build tools, Rollup, webpack, ESM, React, Vue, TypeScript, and frontend development.

Important Notes

Requirements

Node.js version 18 or higher for running the Vite development server and build process. Package manager such as npm, yarn, or pnpm for installing Vite and project dependencies. Framework plugin matching your project stack for React, Vue, Svelte, or other supported frameworks.

Usage Recommendations

Do: use environment variables prefixed with VITE_ for client-side configuration that is safe to expose. Configure proxy rules in the dev server to avoid CORS issues during development. Enable sourcemaps in production builds for debugging deployed applications.

Don't: import Node.js built-in modules in client code since Vite serves native browser modules. Use require syntax in source code since Vite requires ES module imports. Skip the build step preview by running vite preview to verify production output locally before deploying.

Limitations

Development server behavior differs from production builds since dev uses native ESM while production bundles with Rollup. Some webpack-specific plugins and loaders do not have Vite equivalents requiring alternative approaches. Large dependency pre-bundling on first startup can be slow though subsequent starts use cached results.