Sự khác biệt giữa Vite dev server và Webpack dev server?

Question

Luyện Phỏng Vấn IT · Accepted Answer

Cold start comparison: Webpack dev server bundle toàn bộ module graph trước khi server ready — project 1000 modules có thể mất 10-30 giây; Vite start trong <1 giây bất kể project size vì không pre-bundle source. Dependency pre-bundling: Vite dùng esbuild pre-bundle nodemodules một lần (cached), browser chỉ cần load vài files thay vì hàng nghìn; Webpack bundle tất cả cùng nhau. HMR mechanism differences: Webpack HMR phải re-compile affected module và dependencies, có thể mất 1-10 giây với large modules; Vite HMR chỉ invalidate changed module và propagate lên import chain, thường <100ms. Vite precision: Vite biết chính xác file nào thay đổi và chỉ update đúng phần đó; React Fast Refresh với Vite preserve component state khi update. Trade-off: Vite dev (ESM) và production (Rollup bundled) có thể có behavior khác nhau — potential inconsistencies với circular imports hay module loading order. Large projects: Vite advantage càng rõ khi project lớn hơn — Webpack cold start tăng linear với module count, Vite gần như constant. Turbopack (Next.js 13+): Vercel's Webpack successor viết bằng Rust, cạnh tranh trực tiếp với Vite về speed trong dev mode.