一键导入
vite
Vite 7.x build tool patterns. Use when configuring build setup, development server, environment variables, asset handling, or optimizing production builds for React applications.
菜单
Vite 7.x build tool patterns. Use when configuring build setup, development server, environment variables, asset handling, or optimizing production builds for React applications.
基于 SOC 职业分类
Biome 2.x linting and formatting patterns. Use when configuring code quality tools, setting up linting rules, formatting code, or integrating with CI/CD. Covers migration from ESLint/Prettier.
Hono 4.x web framework patterns. Use when building APIs, middleware, routing, or server-side applications. Covers multi-runtime support (Node, Bun, Cloudflare Workers), validation, CORS, and error handling.
Radix UI primitive patterns. Use when building accessible, unstyled UI components like dialogs, dropdowns, tooltips, tabs, and selects. Covers Tailwind styling, keyboard navigation, animations, and portal management.
React development patterns. Use when building React components, managing state, creating custom hooks, or optimizing React applications. Covers React 19 features, TypeScript integration, and composition patterns.
Tailwind CSS 4.x utility-first styling patterns. Use when building UI components, creating responsive layouts, implementing design systems, or customizing themes. Covers CSS-first configuration, @theme directive, and component patterns.
Plan infrastructure capacity for expected load. Use when sizing systems, planning for growth, or analyzing resource requirements. Covers load estimation and resource sizing.
| name | vite |
| description | Vite 7.x build tool patterns. Use when configuring build setup, development server, environment variables, asset handling, or optimizing production builds for React applications. |
Platform: Web only. Mobile demos use Expo with Metro bundler. See the expo-sdk skill.
Use Context7 MCP (
resolve-library-idthenquery-docs) for full API reference, plugin ecosystem, and advanced configuration options.
Build tool and development server for Vite 7.x. Provides instant server start, fast HMR, optimized production builds, and first-class TypeScript support.
Install: pnpm add -D vite
Initial setup:
vite.config.ts with TypeScript typespnpm add -D @vitejs/plugin-react.env filespnpm viteProduction optimization:
pnpm vite buildpnpm vite previewimport { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
'@hooks': path.resolve(__dirname, './src/hooks'),
'@utils': path.resolve(__dirname, './src/utils'),
}
},
server: {
port: 5173,
strictPort: true,
open: true,
hmr: { overlay: true },
proxy: {
'/api': { target: 'http://localhost:3000', changeOrigin: true }
}
},
build: {
outDir: 'dist',
sourcemap: true,
minify: 'esbuild',
}
});
Update tsconfig.json paths to match aliases:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@components/*": ["./src/components/*"]
}
}
}
React with SWC (faster alternative): pnpm add -D @vitejs/plugin-react-swc, import from @vitejs/plugin-react-swc.
Fast Refresh is enabled by default — no configuration needed.
# .env - Base config (committed)
VITE_APP_NAME=MyApp
VITE_API_VERSION=v1
# .env.local - Local overrides (gitignored — put secrets here)
VITE_API_URL=http://localhost:3000
# .env.development / .env.production - mode-specific defaults
CRITICAL: All env vars must start with VITE_ to be exposed to client code.
// Access in code
const apiUrl = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;
const isProd = import.meta.env.PROD;
const mode = import.meta.env.MODE; // 'development' | 'production'
// Type-safe env vars — add to vite-env.d.ts or src/env.d.ts
interface ImportMetaEnv {
readonly VITE_APP_NAME: string;
readonly VITE_API_URL: string;
}
// Runtime validation
if (!import.meta.env.VITE_API_URL) {
throw new Error('VITE_API_URL is required');
}
Dynamic config with loadEnv:
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
server: { port: Number(env.PORT) || 5173 }
};
});
export default defineConfig({
build: {
chunkSizeWarningLimit: 500, // KB
rollupOptions: {
output: {
manualChunks: {
'react-vendor': ['react', 'react-dom'],
'router-vendor': ['react-router-dom'],
'animation-vendor': ['framer-motion'],
},
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash][extname]',
}
}
}
});
Advanced function-based chunking — use when you need per-view splitting:
manualChunks(id) {
if (id.includes('node_modules')) {
if (id.includes('framer-motion')) return 'vendor-animation';
if (id.includes('react')) return 'vendor-react';
return 'vendor';
}
}
import { compression } from 'vite-plugin-compression2';
// pnpm add -D vite-plugin-compression2
plugins: [
compression({ algorithm: 'gzip', include: /\.(js|css|html|svg)$/ }),
compression({ algorithm: 'brotliCompress', include: /\.(js|css|html|svg)$/ }),
]
For production-only minification:
minify: isDev ? false : 'terser',
terserOptions: { compress: { drop_console: true, drop_debugger: true } }
PostCSS / Tailwind: Point css.postcss to your postcss.config.js. Enable cssCodeSplit: true (default) for large apps.
Asset handling:
// src/assets — processed by Vite (hashed, optimized)
import logo from '@/assets/logo.svg';
// /public — served as-is, NOT processed
<img src="/images/logo.svg" />
// ❌ Never import from public directory
Inline limit: Assets under 4 KB are inlined as base64 by default (assetsInlineLimit: 4096).
Base path for subdirectory hosting: base: '/my-app/'
../../../ import hellVITE_ for automatic exposure.env.local for secrets — never commit to gitpnpm vite build && pnpm vite previewstrictPort: true to avoid silent port conflictsVITE_ prefix on environment variables/public directory instead of src/assets.env.local with API keysstrictPort (silent port conflicts)tsconfig.json paths when using aliasesBuild analysis:
pnpm vite build
# Output shows chunk sizes:
# dist/js/vendor-react-abc123.js 142.34 kB
# dist/js/index-def456.js 87.21 kB
Preview testing:
pnpm vite build && pnpm vite preview
# Verify: all routes work, assets load, no console errors
HMR speed: Should be < 50ms for most updates. Check Chrome DevTools → Network → Filter by "vite".