Webpack 的核心是构建模块依赖图并一次性打包输出静态资源,构建流程包括 loader、plugin、多阶段优化,适合大型项目。

Vite 的核心理念是:利用浏览器原生支持 ESM 的能力,实现按需加载模块。启动开发环境时不打包整个项目,而是用原生 import 动态加载,构建阶段才使用 Rollup 打包产物。

所以 Vite 启动更快,是因为:

  • 跳过了构建整个依赖图,只按需加载页面中实际使用的模块;
  • 利用浏览器对 ESM 的支持进行即时编译;
  • 使用 esbuild(Go 编写)作为依赖预构建工具,速度远超 Babel(Webpack 默认用的);