Vite là gì? Build tool siêu nhanh cho frontend hiện đại
Vite (French for “quick”) là build tool và dev server cho web app hiện đại, được phát triển bởi Evan You (người tạo Vue.js). Khác với các bundler truyền thống như Webpack (qui Urbanisme và bundle toàn bộ source code khi start dev server), Vite tận dụng ES modules native của browser để phục vụ file ngay khi được request, eliminating the need for bundling during development.
Vite tạo ra trải nghiệm phát triển “instant-on”: cold start dưới 50ms, HMR (Hot Module Replacement) thực sự real-time (<50ms update), và build production siêu nhờ Rollup. Vite đã trở thành công cụ mặc định cho Vue 3, Svelte, React, Preact, Lit, Vanilla JS và không chỉ dừng ở frontend — nó còn hỗ trợ full-stack qua Vite plugins cho SSR (Nuxt 3, SvelteKit, Remix).
Tại sao Vite nhanh?
1. Dev server: Native ESM over bundling
Trong dev mode, Vite chia source code thành hai loại:
- Dependencies: Thường thay đổi ít (lodash, react, vue) → pre-bundle bằng esbuild (10-100x nhanh hơn JS-based bundlers) và cache trong
node_modules/.vite - Source code: Thường thay đổi nhiều → serve dưới dạng native ESM (via
) trực tiếp từ filesystem, browser chịu trách nhiệm import và bundle ở runtime
Khi cập nhật một file, chỉ cần invalidate module đó — không cần rebundle toàn bộ app.
2. HMR (Hot Module Replacement) tối ưu
Vite’s HMR thực hiện trên ESM và có thể precision invalidate module chain. Khi chỉnh sửa một module:
- Chỉ module đó và các module bezpośrednio import nó được HMR update
- Các module khác giữ nguyên state (ví dụ: form input không bị reset)
- Update dưới 50ms ngay cả với app lớn (nhờ vào esbuild pre-bundle và native ESM)
3. Build production: Rollup + esbuild
Production build dùng Rollup (tích hợp sẵn) để tối ưu code chunking và treeshaking, nhưng tận dụng esbuild để transpile TypeScript/JavaScript (20-40x nhanh hơn TSC/Babel). Kết quả: build tốc độ cao, output size tối ưu.
Vite vs Webpack vs Parcel vs esbuild
| Tiêu chí | Vite | Webpack 5 | Parcel 2 | esbuild |
|---|---|---|---|---|
| Dev server start | <50ms | 5-30s | 1-5s | N/A (chỉ bundler) |
| HMR speed | <50ms | 200-1000ms | <100ms | N/A |
| Production build | Rollup + esbuild | Webpack | Parcel | esbuild |
| Config complexity | Zero-config | High | Low | Minimal |
| HMR preserves state | Yes | Partial | Yes | N/A |
| CSS processing | PostCSS/Tailwind/SCSS | Loader-based | Transformer-based | Plugin |
| Framework support | Vue, React, Svelte, Preact, Lit, Vanilla | All via loaders | Framework agnostic | Via plugins |
| SSR | Via plugins (Nuxt 3, etc.) | Via webpack-node-externals | Limited | No |
Ecosystem & Plugin system
Vite sử dụng Rollup plugin interface (tương thích với hàng nghìn plugin có sẵn). Các plugin phổ biến:
@vitejs/plugin-vue: Vue 3 single-file components@vitejs/plugin-react: React Fast Refresh@vitejs/plugin-vue-jsx: Vue JSXvite-plugin-ssr: Framework agnostic SSRvite-plugin-pwa: Zero-config PWA (Workbox)vite-plugin-eslint: ESLint integrationvite-plugin-imagetools: Responsive images, AVIF/WebP
Vite cũng tích hợp sẵn:
- CSS preprocessing: Sass, Less, Stylus
- CSS modules
- PostCSS (kèm Autoprefixer, cssnano)
- JSON, WASM, glob imports
- Environment variables (
import.meta.env) - Build-in preview server
Khi nào nên dùng Vite?
- New project: Vue 3, React 18, Svelte 4, Preact, Lit, Vanilla TS/JS
- Migration từ CRA/Webpack: Vite cung cấp
vite-plugin-legacyđể hỗ trợ IE11 nếu cần - Component library: Build đẹp, tree-shaking tốt, HMR đắc lực
- Design system: Storybook integration qua
vite-plugin-storybook - Micro-frontend: Module Federation plugin
- Library authors: Lib như Zod, Valibot, TanStack Query dùng Vite để build demo/docs
Hạn chế cần biết
- SSR maturity: Vite’s SSR ecosystem trẻ hơn Nuxt/Next (đang phát triển nhanh)
- Legacy browser support: Cần plugin để polyfill dynamic import và ESM cho IE11
- Bundle analysis: Một số tính năng cao cấp của Webpack (split chunks analysis) cần plugin
- Worker threads: Không dùng worker threads như esbuild (để giữ tính đơn giản)
Cài đặt và bắt đầu
- Tạo project:
npm create vite@latest my-app -- --template vue(hoặc react, svelte, vanilla) - Cài dependencies:
cd my-app && npm install - Chạy dev server:
npm run dev→ mởhttp://localhost:5173 - Build production:
npm run build→ output trongdist/ - Preview production:
npm run preview
Kết luận
Vite đã định hình lại trải nghiệm phát triển frontend hiện đại: từ “chờ một phút để rebuild” sang “lưu file và thấy thay đổi ngay lập tức”. Với thiết kế tận dụng ES module native, esbuild tốc độ ác quái, và ecosystem sinh động, Vite không chỉ là công cụ build — nó là nền tảng cho tương lai của web development. Nếu bạn đang bắt đầu project mới vào năm 2025, Vite là lựa chọn rõ ràng cho dev stack.
Nguồn: vitejs.dev, GitHub: vitejs/vite, esbuild
