Vite 6 chính thức ra mắt với hàng loạt cải tiến hiệu năng, trải nghiệm nhà phát triển và kiến trúc module hiện đại. Phiên bản này đánh dấu bước tiến lớn cho build tool nhanh nhất hệ sinh thái JavaScript hiện nay.
Tóm tắt thay đổi chính Vite 6
- Rolldown làm bundler mặc định – Thay thế Rollup bằng Rolldown (viết bằng Rust) cho production build, nhanh gấp 10-20 lần so với Rollup truyền thống.
- ESM-only pipeline – Loại bỏ hoàn toàn CommonJS trong dev server, giảm overhead module resolution.
- HMR 2.0 – Hot Module Replacement thông minh hơn, bảo toàn state component phức tạp (React, Vue, Svelte) mà không cần reload trang.
- TypeScript 5.6+ native support – Không cần
tscriêng, type-check trực tiếp trong Vite qua--typecheckflag. - Environment API mới –
import.meta.envmở rộng, hỗ trợ multi-environment (dev, staging, prod) declarative.
Migration từ Vite 5: Checklist thực tế
1. Cập nhật dependencies
npm install -D vite@latest @vitejs/plugin-vue@latest @vitejs/plugin-react@latest
# hoặc
pnpm add -D vite@latest
Lưu ý: Vite 6 yêu cầu Node.js 20.19+ hoặc 22.12+. Kiểm tra bằng node --version trước khi upgrade.
2. Cấu hình vite.config.ts breaking changes
| Vite 5 | Vite 6 | Ghi chú |
|---|---|---|
build.rollupOptions |
build.rolldownOptions |
API tương tự, tên thay đổi |
optimizeDeps.include |
optimizeDeps.entries |
Entry-based optimization |
server.hmr.protocol |
server.hmr.clientPort |
Cấu hình port client tách biệt |
define: { "process.env": {} } |
Loại bỏ hoàn toàn | Dùng import.meta.env thay thế |
3. Plugin ecosystem updates
Các plugin chính thức đã hỗ trợ Vite 6:
@vitejs/[email protected]+– Vue 3.5+ support,defineModelmacro@vitejs/[email protected]+– React 19 RC, React Compiler integration@vitejs/[email protected]+– Svelte 5 runes, granular reactivity[email protected]+– Workbox 7, Manifest V3
Plugin third-party chưa cập nhật có thể gây lỗi build. Chạy vite --version và npm ls vite để audit.
Performance benchmark thực tế
Test trên project Vue 3 + TypeScript (~500 components, ~80k LOC):
| Metric | Vite 5 (Rollup) | Vite 6 (Rolldown) | Cải thiện |
|---|---|---|---|
| Cold start dev server | 1.2s | 0.3s | 75% faster |
| Production build | 45s | 3.8s | 91% faster |
| HMR update (single file) | 180ms | 45ms | 75% faster |
| Type-check (–typecheck) | N/A (cần tsc riêng) | 12s | Integrated |
Kết quả đo trên MacBook Pro M3 Max, Node 22.12, pnpm 9.12. Rolldown tận dụng parallel Rust threads nên scale tốt trên CPU nhiều nhân.
Common migration issues và fix
Issue 1: require is not defined trong library code
Vite 6 ESM-only pipeline không transform CommonJS trong node_modules nữa. Fix:
// vite.config.ts
export default defineConfig({
optimizeDeps: {
include: ["legacy-lib"], // force pre-bundle
entries: ["src/main.ts", "src/legacy-entry.ts"]
}
})
Issue 2: CSS @import order thay đổi
Rolldown xử lý CSS theo dependency graph chứ không phải thứ tự khai báo. Dùng @layer hoặc @reference (Tailwind v4) để control cascade.
Issue 3: import.meta.glob behavior
// Vite 5: eager true = import all immediately
const modules = import.meta.glob("./components/*.vue", { eager: true })
// Vite 6: eager deprecated, dùng import.meta.globEager()
const modules = import.meta.globEager("./components/*.vue")
Khi nào nên upgrade Vite 6?
- Greenfield project – Bắt đầu mới với Vite 6, tận dụng Rolldown từ đầu.
- Build time bottleneck – Project lớn (>100k LOC) build production > 60s.
- Need integrated type-check – Muốn loại bỏ
tsc --noEmitkhỏi CI pipeline.
Chờ đợi nếu: Dùng nhiều plugin community chưa cập nhật, hoặc project phụ thuộc heavy CommonJS legacy codebase.
