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 hỏi file nào thì Vite transform đúng file đó qua native ESM, nên cold start gần như tức thì bất kể project lớn cỡ nào.

• esbuild pre-bundling: lần start đầu, Vite dùng esbuild (viết bằng Rust, nhanh hơn bundler JS 10-100 lần) gộp node_modules thành một module để browser khỏi phải request hàng nghìn file nhỏ; kết quả cache trong node_modules/.vite.
• Native ESM serving: source được serve thẳng dưới dạng ES module, browser tự lo dependency graph, Vite chỉ transform đúng file mà request hiện tại cần.
• HMR: chỉ invalidate module vừa đổi cùng những file import trực tiếp nó, không xử lý lại cả bundle graph.

Lên production Vite lại bundle bằng Rollup chứ không dùng esbuild, vì Rollup tree-shaking tốt hơn và output nhỏ hơn; esbuild vẫn được giữ cho khâu minify vì nhanh hơn Terser.

Plugin của Vite tương thích với Rollup plugin API — @vitejs/plugin-react (React Fast Refresh), @vitejs/plugin-vue, vite-plugin-pwa. Vite cũng là nền của SvelteKit, Qwik, Astro và một phần Remix.