Vite là gì? Tại sao nhanh hơn Webpack trong development?

Vite là build tool thế hệ mới của Evan You.

• Dev server không bundle — browser request file nào thì Vite transform file đó on-demand qua native ESM, cold start gần như instant bất kể project size. esbuild pre-bundling: lần đầu start, Vite dùng esbuild (Rust-based, 10-100x nhanh hơn JS bundlers) để bundle node_modules thành single module — tránh browser phải request hàng nghìn files nhỏ; result được cache trong node_modules/.vite.
• Native ESM serving: source files served dưới dạng ES modules trực tiếp, browser handle dependency graph — chỉ transform file cần thiết cho request hiện tại.
• Production: dùng Rollup để bundle vì Rollup có tree shaking tốt hơn và output nhỏ hơn esbuild cho production; cũng dùng esbuild để minify (nhanh hơn Terser).
• Plugin ecosystem: Vite plugins compatible với Rollup plugin API — vite-plugin-react (React Fast Refresh), @vitejs/plugin-vue, vite-plugin-pwa.
• Framework integrations: Vite là foundation cho SvelteKit, Qwik, Astro, và Remix (một phần).
• HMR: chỉ invalidate module thay đổi và direct importers — không re-process toàn bộ bundle graph.

Vite is a next-generation build tool created by Evan You.

• The dev server does not bundle — when the browser requests a file, Vite transforms it on-demand via native ESM, making cold start nearly instant regardless of project size. esbuild pre-bundling: on first start, Vite uses esbuild (Rust-based, 10-100x faster than JS bundlers) to bundle node_modules into a single module — preventing the browser from having to request thousands of small files; the result is cached in node_modules/.vite.
• Native ESM serving: source files are served directly as ES modules, and the browser handles the dependency graph — only transforming files needed for the current request.
• Production: uses Rollup for bundling because Rollup has better tree shaking and produces smaller output than esbuild for production; also uses esbuild for minification (faster than Terser).
• Plugin ecosystem: Vite plugins are compatible with the Rollup plugin API — vite-plugin-react (React Fast Refresh), @vitejs/plugin-vue, vite-plugin-pwa.
• Framework integrations: Vite is the foundation for SvelteKit, Qwik, Astro, and Remix (in part).
• HMR: only invalidates the changed module and its direct importers — does not reprocess the entire bundle graph.