Vite là công cụ build phía dev server dành cho lập trình viên JavaScript và TypeScript, được Evan You tạo ra sau khi rời dự án Vue.js. Điểm mạnh cốt lõi của Vite là tốc độ khởi động tức thì và cơ chế thay thế module nóng (HMR) chạy trực tiếp trên trình duyệt mà không cần bundle toàn bộ dự án. Bài viết này phân tích cách Vite hoạt động, vì sao nó nhanh hơn webpack, và khi nào bạn nên chọn công cụ này.
Vite là gì
Vite (phát âm giống từ tiếng Pháp “vitesse”, nghĩa là tốc độ) là một dev server và bundler được viết bằng TypeScript và Rust, phát triển bởi ViteZero Inc. Hiện tại bản Vite dùng Rolldown ở lớp bundling nền tảng.
Khác biệt cốt lõi nằm ở cách tiếp cận với hai giai đoạn phát triển và xây dựng sản phẩm:
- Giai đoạn phát triển (dev): Vite không bundle gì cả. Nó phục vụ mã nguồn gốc (ES modules) trực tiếp qua HTTP, kèm biến đổi TypeScript và JSX on-the-fly bằng esbuild.
- Giai đoạn build: Vite gọi Rollup hoặc Rolldown để gom toàn bộ mã nguồn thành file tĩnh tối ưu cho production.
Nhờ tách hai giai đoạn, thời gian khởi động dev server gần như không phụ thuộc vào quy mô dự án. Một dự án có vài nghìn module vẫn khởi động trong khoảng một giây, trong khi webpack phải bundle toàn bộ trước khi dev server sẵn sàng.
Cơ chế Native ESM và phân tích phụ thuộc tiền tố
Trước đây, trình duyệt chỉ biết tải module qua thẻ <script>. Các module ES được thêm vào đó là một tính năng tương đối mới khiến việc phân tích dependency graph tĩnh trở nên khó khăn trong các bundler cũ.
Vite giải quyết bằng cách chia quá trình khởi động thành hai bước. Trước tiên, Vite quét mã nguồn và phát hiện toàn bộ bare import, tức các lệnh import không có đường dẫn tương đối như import React from 'react'. Những lệnh import này được ghi vào một module riêng, rồi mô phỏng node_modules bằng cách phục vụ file ESM đã được tiền xử lý của các thư viện đó.
Sau đó, khi trình duyệt thực sự mở trang web, phần lớn các lệnh import đã được giải quyết xong. Chỉ còn các module tương đối lười biếng mới được tải khi trình duyệt thực sự yêu cầu. Kết quả là thời gian phản hồi ban đầu luôn ở mức vài trăm mili giây bất kể dự án lớn đến đâu.
Hot Module Replacement hoạt động ra sao
HMR cho phép developer giữ nguyên trạng thái ứng dụng khi sửa code, chỉ thay phần module thay đổi thay vì tải lại toàn trang. Vite còn đi xa hơn với Hot Data API: một số framework như Vue và Svelte cập nhật trạng thái ứng dụng tự động khi module được thay thế.
Khi bạn sửa một file, Vite chỉ gửi bản cập nhật cho các module liên quan đến thay đổi đó. Phần giao diện người dùng nhận thông điệp qua WebSocket và áp dụng bản vá, trong khi các module độc lập không bị ảnh hưởng.
So sánh Vite và webpack
| Tiêu chí | Vite | webpack |
|---|---|---|
| Cách phục vụ dev | Native ESM, không bundle | Bundle toàn bộ trước |
| Khởi động dev server | Gần như tức thì | Tăng theo quy mô dự án |
| Build production | Rollup/Rolldown | webpack core |
| Độ ổn định cấu hình | Đơn giản, ít tùy chọn | Phức tạp, nhiều loader |
| Hệ sinh thái plugin | Đang phát triển nhanh | Rất lớn và lâu đời |
Cấu hình cơ bản với Vite
Khởi tạo một dự án Vite mới chỉ cần vài giây, không cần cài đặt webpack hay cấu hình loader thủ công:
- Cài đặt và tạo dự án mẫu cho framework như React, Vue hoặc Svelte bằng lệnh khởi tạo chính thức.
- Dùng file
vite.config.tsđể khai báo alias đường dẫn, biến môi trường, server proxy và plugin. - Lệnh
vite devkhởi động môi trường phát triển,vite buildtạo bản production,vite previewchạy thử bản build.
Một tình huống phổ biến là dùng proxy để tránh lỗi CORS khi gọi API từ backend chạy ở cổng khác. Chỉ cần khai báo proxy trong file cấu hình là frontend gọi đường dẫn tương đối, tránh phải cấu hình CORS thủ công ở phía server.
Khi nào nên chọn Vite
Vite phù hợp với hầu hết dự án frontend hiện đại dùng framework như React, Vue, Svelte hay SolidJS. Nó đặc biệt tốt với các ứng dụng nhiều trang, thư viện component và các SPA cần vòng lặp phát triển nhanh.
Có vài trường hợp bạn vẫn nên cân nhắc lựa chọn khác. Nếu dự án phụ thuộc nặng vào các plugin webpack cũ hoặc các kỹ thuật build không chuẩn, việc chuyển đổi có thể tốn công. Doanh nghiệp đã có pipeline webpack ổn định và chưa gặp vấn đề hiệu năng thì lý do để chuyển đổi chưa đủ mạnh.
Vite tối ưu cho trải nghiệm lập trình viên chứ không phải tối ưu cho việc giảm dung lượng bản build. Nếu ưu tiên của bạn là kích thước bản phát hành nhỏ nhất, bạn vẫn cần kiểm tra kết quả build thực tế thay vì giả định rằng công cụ nhanh hơn thì cũng nhỏ hơn.
Tài liệu tham khảo
- Trang hướng dẫn chính thức của Vite, phần giải thích chi tiết về cơ chế native ESM và HMR tại vite.dev/guide.
- Tài liệu về Rollup, lớp bundling được Vite sử dụng trong giai đoạn build, tại rollupjs.org.
- Hướng dẫn chính thức về tính năng code splitting của webpack, để hiểu sự khác biệt về cách chia chunk tại webpack.js.org.
- Hồ sơ dự án Vite trên GitHub để theo dõi lịch sử phát triển và các thay đổi sắp tới tại github.com/vitejs/vite.
