Vite: một cách nhanh hơn để xây dựng dự án web hiện đại
/vite
Vite là một build tool thay cách làm cũ — bundle toàn bộ trước khi dev server chạy được — bằng một dev server phục vụ trực tiếp ES module gốc cho trình duyệt, nên tốc độ khởi động và Hot Module Replacement không chậm đi dù dự án lớn đến đâu. Vite thực sự làm được điều đó khi phát triển. Vấn đề nằm ở bước production build: Rolldown vẫn phải bundle toàn bộ, nên cảm giác khởi động tức thì không kéo dài sang lúc build trên CI.
Vite là gì?
Vite là một build tool cho các dự án web hiện đại, gồm hai phần: một dev server phục vụ code dưới dạng ES module gốc với Hot Module Replacement nhanh, và một lệnh build chuyển cùng đoạn code đó cho Rolldown để tạo static asset tối ưu. Tên gọi 'Vite' là từ tiếng Pháp nghĩa là 'nhanh.' Vite còn có Universal Plugin Interface và JavaScript API được gõ kiểu đầy đủ, nên một plugin chạy được ở cả dev server lẫn build production.
Các tính năng nổi bật của Vite
- ✓Dev server phục vụ file nguồn dưới dạng ES module gốc, để trình duyệt tự resolve module graph thay vì phải chờ bundler làm trước.
- ✓Hot Module Replacement mà README gọi là 'Lightning Fast' — tính năng hầu hết developer nhận ra đầu tiên khi chuyển từ một dev server dựa trên bundler.
- ✓Lệnh build chuyển output production cho Rolldown để tối ưu static asset, tách biệt hoàn toàn với cách dev server chạy.
- ✓Một Universal Plugin Interface, nên cùng một plugin có thể chạy được ở cả dev server và bước build production.
- ✓Một JavaScript API được gõ kiểu đầy đủ để script hóa Vite.
- ✓README còn liệt kê 'Rich Features' như một gạch đầu dòng, nhưng đoạn trích ở đây không nói rõ cụ thể gồm những gì ngoài plugin và API được gõ kiểu.
Khi nào nên dùng Vite
- •Bắt đầu một dự án frontend mới, nơi thời gian khởi động dev server quan trọng khi codebase lớn dần.
- •Chuyển khỏi một setup Webpack có thời gian rebuild đã trở thành nỗi khó chịu hàng ngày.
- •Scaffold nhanh một dự án bằng package create-vite thay vì tự viết config từ đầu.
- •Xây dựng plugin cần chạy giống hệt nhau ở cả môi trường dev lẫn bước build production bằng Rolldown.
Điểm mạnh
- ✓Thời gian khởi động dev server không chậm đi khi dự án lớn dần, vì Vite bỏ qua hoàn toàn việc bundle ở giai đoạn dev.
- ✓HMR đủ nhanh để README đưa nó lên làm tính năng nổi bật hàng đầu.
- ✓Một plugin API duy nhất phủ cả dev lẫn bước build bằng Rolldown, thay vì phải maintain hai hệ thống riêng biệt.
- ✓Giấy phép MIT, nên không tốn chi phí bản quyền hay bị ràng buộc gì khi sử dụng.
- ✓API được gõ kiểu đầy đủ giúp giảm việc thử-sai khi wiring một build pipeline tùy chỉnh.
Hạn chế và đánh đổi của Vite
- △Đoạn README được cung cấp không cho thấy lệnh cài đặt, số phiên bản, hay danh mục plugin — bạn sẽ cần vào trang docs, không phải trang này, để có những thứ đó.
- △Bước build production vẫn phải chạy toàn bộ qua Rolldown, nên tốc độ nhanh ở giai đoạn dev không tự động chuyển thành build CI nhanh hơn.
- △Mục Sponsors trong README có xuất hiện nhưng trống trong đoạn được cung cấp, nên chi tiết về tài trợ và hậu thuẫn không thể kiểm chứng từ nguồn này.
- △Đoạn trích README không có danh sách đơn vị sử dụng, số liệu benchmark, hay hướng dẫn migration, nên những claim đó không thể đối chiếu với nguồn ở đây.
Vite so với Webpack, esbuild và các lựa chọn khác
Câu hỏi thường gặp
Có, Vite miễn phí và mã nguồn mở, phát hành theo giấy phép MIT. Điều đó nghĩa là bạn có thể dùng trong dự án thương mại hay cá nhân, sửa đổi source, và phân phối lại mà không phải trả phí bản quyền. Repo GitHub lưu trữ package vite lõi cùng với create-vite và @vitejs/plugin-legacy dưới cùng giấy phép.
Config, plugin và JavaScript API của chính Vite là thứ README gọi là 'Fully Typed APIs,' nghĩa là bản thân Vite được viết và gõ kiểu bằng TypeScript. Đoạn README được cung cấp ở đây không nói rõ Vite compile file .ts ở tầng ứng dụng như thế nào, nên hãy xem hành vi cụ thể đó là chưa được tài liệu hóa rõ trong nguồn này và kiểm tra docs chính thức của Vite.
README không liệt kê danh mục plugin, nhưng xác nhận một plugin chính thức cụ thể: @vitejs/plugin-legacy, được publish từ cùng repo với Vite lõi. Plugin kết nối qua thứ README gọi là 'Universal Plugin Interface,' nghĩa là cùng một plugin có thể chạy được cả với dev server lẫn bước build production bằng Rolldown.
Đoạn README được cung cấp ở đây không nói trực tiếp về đường đi migrate từ Webpack, nên các bước cụ thể chưa được xác nhận tại đây. Điều được xác nhận là dev server của Vite chạy trên ES module gốc thay vì một bundle kiểu Webpack, và đó chính là khác biệt nền tảng mà bất kỳ quá trình migration nào cũng phải xử lý. Hãy xem hướng dẫn migration trong docs chính thức của Vite.
README mô tả lệnh build của Vite là tạo ra 'highly optimized static assets for production,' cho thấy output production là một use case được thiết kế sẵn chứ không phải điều thêm vào sau. Ngoài mô tả đó, nguồn ở đây không có claim về độ trưởng thành phiên bản, số lượng đơn vị sử dụng, hay tuyên bố về độ ổn định, nên hãy xem đây là điều dự án tự nói về chính mình.
HMR của Vite được README mô tả là một tính năng đặt trên nền dev server ES module gốc, cập nhật các module thay đổi ngay trên trình duyệt mà không cần reload lại toàn trang. README gọi đây là 'Lightning Fast HMR' nhưng không nói rõ cơ chế bên dưới — ranh giới module hay cách truyền tải — nên những chi tiết đó không nằm trong nguồn được cung cấp.
Vấn đề mà Vite giải quyết
Trước các công cụ như Vite, một dev server phải bundle toàn bộ ứng dụng trước khi phục vụ trang đầu tiên, nên thời gian khởi động lớn dần theo đúng module graph — một dự án có hàng nghìn module phải chờ lâu hơn để thấy một thay đổi vừa lưu, so với dự án chỉ có hàng trăm module. Dev server của Vite thay vào đó phục vụ file dưới dạng ES module gốc thẳng cho trình duyệt, để trình duyệt tự resolve import theo nhu cầu, và thời gian khởi động không còn tăng theo quy mô dự án theo cách đó nữa.
Cách cài đặt / dùng thử
Đoạn README được cung cấp ở đây không in ra lệnh cài đặt cụ thể — bảng Packages liệt kê badge phiên bản nhưng không có dòng lệnh. Điều được xác nhận là cấu trúc repo: một package vite lõi, một package create-vite để scaffold, và một package @vitejs/plugin-legacy, tất cả đều publish từ cùng một monorepo. Muốn biết bước cài đặt chính xác, README dẫn về trang docs của dự án thay vì liệt kê ngay trong README — nên xem mọi lệnh cụ thể là chưa được tài liệu hóa rõ ràng trong nguồn được cung cấp.
Cách sử dụng
Cách dùng chia thành hai phần mà README mô tả: một lệnh dev khởi động server ES module với HMR, và một lệnh build chuyển giao cho Rolldown để tạo output production. Ngoài sự phân chia đó, đoạn trích README không có sẵn đoạn config hay cú pháp lệnh cụ thể nào — nó dẫn link ra trang docs và trang JavaScript/Plugin API thay vì show trực tiếp.
Nên dùng Vite khi nào — và khi nào nên bỏ qua
Developer frontend bắt đầu một dự án mới, hoặc đang chạy một dự án trên dev server Webpack đã chậm dần khi rebuild, là nhóm phù hợp rõ nhất với Vite. Người viết plugin muốn một API duy nhất chạy được cả ở dev lẫn production cũng khớp với hướng Universal Plugin Interface mà README nói tới. Team đang phụ thuộc vào một loader hay plugin Webpack cụ thể chưa được port sang, và không thể gánh thêm việc migration lúc này, nên khoan đã cho tới khi đối chiếu xong danh sách plugin đang dùng với những gì Vite đã hỗ trợ.
Repo liên quan
Chưa chắc vite có hợp với bạn?
Để ChatGPT, Claude hoặc Perplexity tìm hiểu giúp — bấm bên dưới và xem AI nói gì về vite.