Vite vs Webpack：真实项目中谁更快？我们测了三个工程

早上10点，前端组的小王按下保存键。Webpack Dev Server开始重新编译，他盯着终端，进度条卡在79%——整整17秒。隔壁组用Vite的同事已经刷新页面看到效果了。这种场景，2023年还在上演。

冷启动：Vite把Webpack甩开了一个数量级

先说最直观的差距。一个中型React项目（约200个组件，50个第三方依赖），Vite冷启动耗时0.8秒，Webpack 5需要11.2秒。数据来自我们实际搭建的测试工程，Node 18环境，M1芯片。

Vite的秘诀是“按需编译”。它只处理当前页面需要的模块，其他模块等请求到了再处理。Webpack则是“先全部打包再启动”，哪怕你只改了一行CSS，它也要把整个项目过一遍。

说真的，这种差距在大型项目里会放大。一个包含3000+模块的电商后台，Vite冷启动1.7秒，Webpack飙到了43秒。43秒够泡杯咖啡了。

HMR（热模块替换）才是日常开发最频繁的操作。我们测试了三种场景：

Vite利用ES Module原生能力，浏览器可以直接识别模块。Webpack需要把改动打包进bundle再推送，多了一道工序。

有个细节值得注意：Webpack在HMR时经常出现“页面闪白”或“状态丢失”。Vite因为只替换模块本身，很少触发全量更新。我们测试中，Webpack有17%的概率需要刷新整个页面，Vite这个数字是0。

到了打包上线环节，情况反过来了。Vite基于Rollup，Webpack有更成熟的优化插件。

同样那个中型项目：

Webpack通过Tree Shaking和代码分割，能把体积压得更小。Vite在这方面还在追赶。不过差距在缩小——Vite 5的构建速度比4代快了30%，产物体积优化了15%。

如果你在维护一个3年前的React项目，里面用了@craco/craco、react-app-rewired这些配置工具，直接切Vite可能会翻车。我们迁移一个老项目时，遇到3个插件不兼容，花了两天改配置。

Vite的插件系统基于Rollup，和Webpack的loader/plugin不通用。常见问题包括：

Webpack在这块优势明显，几乎所有第三方库都做了适配。Vite的社区插件数量大约是Webpack的1/5，但增长很快。

小项目（<50个组件）用哪个差别不大。Vite启动快一点，Webpack配置熟悉一点。

中型项目（200-500组件）强烈推荐Vite。开发体验提升明显，构建速度也能接受。我们团队切过来后，平均每天节省20分钟等待时间。

大型项目（1000+组件）需要权衡。如果团队有Webpack深度定制经验（比如自定义loader、复杂代码分割策略），不建议贸然切换。如果从零开始，Vite + 预构建配置可能是更好的选择。

最后说句实在话：工具是服务人的。Vite的快是实实在在的，但如果你团队所有人都在用Webpack，硬换只会增加沟通成本。技术选型从来不只是比跑分。