Vite là gì?
Nếu bạn đã từng tạo project React bằng create-react-app và phải chờ 30-60 giây mỗi lần khởi động dev server, thì đây là tin tốt: có một công cụ tốt hơn nhiều tên là Vite.
Vite (phát âm như "vít" — tiếng Pháp có nghĩa là "nhanh") là công cụ build frontend thế hệ mới, được tạo bởi Evan You — người đã tạo ra Vue.js. Vite ra mắt năm 2020 và nhanh chóng trở thành lựa chọn hàng đầu cho các dự án React, Vue, Svelte.
Điểm nổi bật của Vite là tốc độ đáng kinh ngạc: khởi động dev server trong khoảng 300ms, bất kể project của bạn lớn đến đâu.
Tại sao Vite nhanh hơn Webpack?
Để hiểu tại sao Vite nhanh, hãy so sánh cách hoạt động:
Webpack và CRA (cách cũ): trước khi bạn có thể xem kết quả, Webpack phải đọc toàn bộ source code, phân tích dependencies, bundle (đóng gói) tất cả thành một file lớn, rồi mới serve cho browser. Với project lớn, quá trình này mất 30-60 giây.
Vite (cách mới): Vite tận dụng tính năng native ES modules mà các trình duyệt hiện đại đã hỗ trợ sẵn. Thay vì bundle trước, Vite serve từng file trực tiếp — browser tự import những gì cần. Vite chỉ biên dịch file nào browser yêu cầu, theo nhu cầu (on-demand).
Hot Module Replacement (HMR) của Vite cũng nhanh hơn: khi bạn sửa một file, chỉ module đó được cập nhật — không cần reload toàn bộ app. Thay đổi hiển thị ngay lập tức trong trình duyệt.
So sánh Vite vs Webpack vs Create React App
| Tiêu chí | Vite | Webpack | Create React App |
|---|---|---|---|
| Thời gian khởi động | ~300ms | 30-60s+ | 20-40s |
| HMR speed | Gần như tức thì | Chậm | Trung bình |
| Cấu hình | Đơn giản | Phức tạp | Ẩn (không cấu hình được) |
| Trạng thái | Đang phát triển mạnh | Vẫn dùng rộng rãi | Đã deprecated |
| Production build | Rollup | Webpack | Webpack |
Lưu ý quan trọng: Create React App (CRA) đã chính thức bị deprecated (không còn được khuyến nghị) từ 2023. Tài liệu chính thức của React hiện tại đề xuất dùng Vite hoặc Next.js cho dự án mới.
Cài đặt và tạo dự án React với Vite
Tạo project React mới với Vite cực kỳ đơn giản:
# Tạo project mới (npm 6+)
npm create vite@latest my-react-app -- --template react
# Di chuyển vào thư mục project
cd my-react-app
# Cài đặt dependencies
npm install
# Khởi động dev server
npm run devSau khi chạy npm run dev, Vite sẽ khởi động server tại http://localhost:5173 (chú ý: không phải 3000 như CRA).
Bạn cũng có thể chạy lệnh và chọn template tương tác:
npm create vite@latest
# Hệ thống hỏi: Project name? → nhập tên
# Framework? → chọn React
# Variant? → chọn JavaScript hoặc TypeScriptCấu trúc thư mục dự án Vite
my-react-app/
├── public/ # File tĩnh (favicon, hình ảnh công khai)
├── src/
│ ├── assets/ # Hình ảnh, font, file tĩnh
│ ├── App.jsx # Component gốc
│ ├── App.css
│ └── main.jsx # Entry point (điểm vào ứng dụng)
├── index.html # File HTML gốc (khác CRA — ở root, không trong public/)
├── package.json
└── vite.config.js # Cấu hình ViteĐiểm khác biệt với CRA: file index.html nằm ở thư mục gốc (không phải trong public/). Đây là thiết kế có chủ ý của Vite — Vite dùng index.html làm entry point.
Cấu hình Vite cơ bản
File vite.config.js cho phép bạn tùy chỉnh Vite:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000, // Đổi port từ 5173 sang 3000
open: true // Tự động mở trình duyệt khi khởi động
},
build: {
outDir: 'dist' // Thư mục output khi build production
}
})Khi nào nên dùng Vite?
- Dự án mới: Luôn dùng Vite thay vì CRA (CRA đã deprecated)
- React, Vue, Svelte: Vite hỗ trợ tất cả các framework phổ biến
- Khi cần dev nhanh: HMR gần như tức thì giúp tăng productivity
Khi nào không dùng Vite: nếu bạn cần Server-Side Rendering (SSR), hãy dùng Next.js (cho React) hoặc Nuxt.js (cho Vue) thay thế.
Tổng kết
Vite đã thay đổi cách developer frontend làm việc hàng ngày. Với thời gian khởi động ~300ms và HMR tức thì, bạn sẽ tốn ít thời gian chờ đợi hơn và có nhiều thời gian code hơn.
Nếu bạn đang bắt đầu project React mới, hãy dùng Vite — không cần phải do dự.
Xem thêm: React là gì? Hướng dẫn học React từ đầu | Lộ trình Frontend Developer 2026
