Export High-Res PDF
Switch to Light Mode
SkillSnap Official GuideUpdated 7/24/2026
Vite
The next-gen frontend tooling. Master the configuration to leverage instant HMR and optimized Rollup builds.
Core Architecture
Unbundled ESM + Esbuild (Instant start)Dev Server
Rollup Bundle (Tree-shaking + Minification)Production
Updates only changed modules (No full reload)HMR
Converts CJS deps to ESM (Cached in node_modules/.vite)Pre-bundling
Configuration (vite.config.ts)
Get TypeScript intellisense for configdefineConfig
Avoid CORS (Proxy /api -> localhost:5000)server.proxy
Map paths ('@' -> './src')resolve.alias
Inject global SCSS variablescss.preprocessorOptions
Asset Handling
Returns public URL stringimport img
Force import as URL?url
Import file content as string?raw
Import as Web Worker constructor?worker
Import multiple modules dynamicallyimport.meta.glob
Environment Variables
Only variables with VITE_ are exposed to clientVITE_Prefix
Access vars (instead of process.env)import.meta.env
Git-ignored overrides.env.local
Load specific env file (e.g., .env.staging)--mode
Plugins & Ecosystem
Official React HMR support@vitejs/plugin-react
Zero-config PWA generationvite-plugin-pwa
Debug intermediate plugin statesvite-plugin-inspect
Test runner using Vite config (No extra setup)Vitest
Build Optimization
Set JS version (default: 'modules')build.target
Split large libs into separate filesmanualChunks
Show gzip size in terminalreportCompressedSize
Test production build locallyvite preview
Troubleshooting
Re-run dependency pre-bundling--force
Fail if port is busy (Don't auto-switch)server.strictPort
Hard reset dependency cacheDelete .vite