Vite vs Webpack

哓番茄大约 5 分钟

把 Vite 和 Webpack 进行对比，实际上是“下一代基于原生 ESM 的构建工具”与“传统基于 Bundle（打包）的构建工具”之间的工业级较量。

它们的核心差异可以用一句话概括：Webpack 属于“先打包再运行”，而 Vite 属于“先启动再按需加载”。

下面为你深度拆解它们的底层原理、核心机制，以及各自的优劣势。

一、原理深度对比

Webpack 是一个经典的模块打包器（Static Module Bundler）。

冷启动机制： 当你运行 npm run dev 时，Webpack 会从入口文件（如 main.js）开始，递归扫描整个项目的所有依赖（包括你的业务代码和 node_modules 中的第三方库），构建起一张巨大的模块依赖图（Dependency Graph）。
编译打包： Webpack 必须把所有的模块进行编译、转换、合并，最终打包成一个或多个浏览器能识别的 Bundle 文件（如 bundle.js），然后才能启动本地开发服务器（Dev Server）并将代码喂给浏览器。
HMR（热更新）痛点： 当你修改了某个组件时，Webpack 需要重新构建该模块及其相关依赖，虽然有缓存机制，但随着项目体积增大，热更新的速度会从几百毫秒逐渐劣化到几秒甚至十几秒。

Vite（法语“快速”的意思）完全颠覆了传统思路，利用了现代浏览器原生支持 ES Modules（import/export） 的特性。

冷启动机制： 当你运行 vite 时，它会立刻启动开发服务器，不需要做任何打包工作！
按需加载（No-Bundle）： 当浏览器请求页面时，遇到 <script type="module" src="/src/main.js">，浏览器会自己发起 HTTP 请求去加载这个文件。Vite 的 Dev Server 拦截到这个请求后，只对当前请求的文件进行实时编译（例如把 Vue/TS 转换为 JS），然后直接返回给浏览器。这意味着，没有被路由匹配到的页面和组件，根本不会参与编译。
双引擎依赖预构建： * 开发环境： 针对体积庞大的第三方依赖（如 lodash-es, react），Vite 在初次启动时会使用 Esbuild（基于 Go 语言编写，速度比 JS 快 10-100 倍）进行“预构建”，将它们统一转换为标准的 ESM 格式并合并成单个模块，存入缓存。
生产环境： Vite 在生产打包时，依然采用成熟的 Rollup 进行 Tree-shaking 和代码压缩，以获得最极致的产物优化。

极速的冷启动： 项目规模再大，服务也能在 1 秒内闪电启动，因为不需要打包。
恒定速度的热更新（HMR）： 无论项目包含 10 个组件还是 10000 个组件，热更新速度始终保持在毫秒级。因为 Vite 只需要让浏览器重新请求那个被修改的文件，与项目整体体积完全解耦。
开箱即用： 默认支持 TypeScript、JSX、CSS 预处理器（Sass/Less）和 CSS Modules，无需繁琐的 loader 配置。
现代产物优化： 生产环境基于 Rollup，生成的代码通常比 Webpack 更干净、体积更小，且原生支持更加激进的 Tree-shaking。

开发与生产环境不一致（双引擎风险）： 开发环境用 Esbuild 拦截，生产环境用 Rollup 打包。这导致极少数情况下，某个特性在开发环境运行完美，到了生产环境打包时却报错。
对老旧浏览器/遗留代码不友好： 极度依赖现代浏览器的原生 ESM 特性。如果项目需要兼容 IE 或非常老的浏览器，或者大量依赖没有转换为 ESM 的传统 CommonJS 库，Vite 踩坑的概率会变大。

无与伦比的生态与稳定性： 沉淀多年，拥有前端界最庞大的 Plugin 和 Loader 生态。任何奇葩的需求、绝版的老库，都能在 Webpack 里找到解决方案。
开发与生产高度一致： 开发和生产都走同一套 Webpack 核心编译逻辑，保障了“所写即所得”，极少出现环境不一致导致的线上事故。
强大的构建控制力： 支持极其复杂的代码分割（Code Splitting）、多入口配置、联邦模块（Module Federation），在处理超大型、非标准结构的“巨无霸”项目时游刃有余。

维度	Webpack	Vite
核心理念	Bundle-based（传统打包）	ESM-based（原生模块流）
开发服务启动	慢（需要先编译打包全局依赖图）	极快（瞬间启动，按需编译）
热更新（HMR）	随着项目变大而变慢	恒定毫秒级（只重新请求修改的文件）
构建工具链	纯 JS 编写的 Loader/Plugins	Esbuild (Go) + Rollup (JS) 双引擎
生态成熟度	极其庞大，无可匹敌	发展极其迅猛，已成为现代框架主流生态
首屏加载速度	较快（因为文件已经合并好）	略慢（由于存在大量零碎的 HTTP 模块请求）
最适用场景	需要支持老旧浏览器、有复杂定制化打包需求、超大型传统微前端系统。	现代单页面应用（Vue3/React）、中小型项目、追求极致开发体验的全新项目。

如果你要开启一个全新的现代 Web 项目（如 Vue 3, React 18+），并且不需要考虑历史技术债，闭眼选 Vite。它带来的开发幸福感是颠覆性的。
如果你在维护一个庞大的企业级老项目，里面充斥着大量的 CommonJS 第三方库、复杂的自定义脚本，或者必须兼容低版本浏览器，那么继续坚守 Webpack 或者是升级到兼容 Webpack 生态的下一代 Rust 架构工具（如 Rspack）是更稳妥的选择。