Module bundler: webpack vs Vite. Tại sao Vite nhanh hơn?

Webpack bundle toàn bộ code thành một hoặc nhiều file trước khi serve, nên startup trong development khá chậm, đặc biệt với dự án lớn.

• Vite tận dụng ES Module native của trình duyệt để serve code trực tiếp mà không cần bundle trong development, kết hợp esbuild (viết bằng Go) để xử lý nhanh gấp nhiều lần.
• Khi build production, Vite dùng Rollup để tạo bundle tối ưu.
• Đánh đổi: Vite mới hơn nên hệ sinh thái plugin nhỏ hơn webpack, nhưng đang phát triển rất nhanh.
• Dự án mới nên chọn Vite, dự án cũ đã ổn định thì webpack vẫn là lựa chọn an toàn.

Webpack bundles all code into one or more files before serving, making development startup slow, especially for large projects.

• Vite leverages the browser's native ES Module support to serve files directly without bundling during development, using esbuild (written in Go) for extremely fast transforms.
• For production builds, Vite uses Rollup to generate optimized bundles.
• Tradeoff: Vite is newer so its plugin ecosystem is smaller than webpack's, but it is growing rapidly.
• New projects should choose Vite; stable existing projects can safely stay on webpack.