Webpack 的核心是构建模块依赖图并一次性打包输出静态资源,构建流程包括 loader、plugin、多阶段优化,适合大型项目。
Vite 的核心理念是:利用浏览器原生支持 ESM 的能力,实现按需加载模块。启动开发环境时不打包整个项目,而是用原生 import 动态加载,构建阶段才使用 Rollup 打包产物。
所以 Vite 启动更快,是因为:
- 跳过了构建整个依赖图,只按需加载页面中实际使用的模块;
- 利用浏览器对 ESM 的支持进行即时编译;
- 使用 esbuild(Go 编写)作为依赖预构建工具,速度远超 Babel(Webpack 默认用的);