从30秒到1秒：Webpack和Vite到底差在哪？

2023年底，一个前端团队在重构老项目时做了个实验。同样的React应用，Webpack冷启动需要32秒，Vite只用了1.2秒。这不是个例。据State of JS 2023调查，Vite的满意度达到89%，而Webpack跌到了58%。

两个构建工具，差距到底在哪？

开发体验：慢在“打包”这件事上

Webpack的核心逻辑是“先打包，再服务”。启动时把所有模块打包成bundle，然后交给浏览器。项目越大，打包越慢。一个包含200个组件的项目，Webpack冷启动30秒是常态。

Vite换了个思路。它用原生ESM（ES Modules）直接让浏览器加载模块，开发服务器只做两件事：提供文件，处理转换。说白了，Vite只在浏览器请求某个模块时才去编译它。这就好比图书馆——Webpack先把所有书搬到前台，Vite是你要哪本给你哪本。

具体数据：在一个1000个模块的项目中，Webpack热更新平均需要800ms，Vite只需要50ms。差距16倍。

配置复杂度：Webpack的“黑盒” vs Vite的“开箱即用”

Webpack配置是很多前端新手的噩梦。一个典型的React项目，Webpack配置需要处理loader、plugin、resolve、optimization等十几个选项。光是loader就有babel-loader、css-loader、style-loader、file-loader，每个还要写规则。

Vite直接内置了常见场景的配置。创建React项目，Vite配置只有10行代码。Webpack至少需要40行。据GitHub上的统计，Vite项目的配置文件平均长度是Webpack的1/4。

但Vite不是万能的。遇到需要深度定制的场景，比如自定义代码分割策略或复杂的polyfill方案，Vite的插件生态远不如Webpack成熟。Webpack有超过5000个可用插件，Vite只有300多个。

生产构建：Vite用Rollup，Webpack靠自己

很多人以为Vite生产构建和开发一样快。不是的。Vite生产构建用的是Rollup，一个比Webpack更轻量但功能更单一的打包器。

测试数据显示，一个中等规模项目，Webpack生产构建耗时45秒，Vite（Rollup）耗时38秒。差距不大。但在代码分割和tree-shaking上，Rollup的精度更高。据BundlePhobia数据，Rollup打包后的文件体积平均比Webpack小12%到18%。

不过，Webpack在代码分割的灵活性上更强。你可以精确控制每个chunk的大小和数量。Rollup的配置选项相对有限。

兼容性与迁移成本

Vite需要浏览器支持ESM。这意味着IE11直接被抛弃。如果你的项目还需要兼容IE，Vite基本没法用。Webpack通过一系列polyfill和transform，能让你在IE6上跑React。

迁移成本也是个现实问题。从一个Webpack项目迁移到Vite，需要重写构建配置、调整路径别名、处理环境变量。一个包含50个模块的项目，迁移时间大概是3到5天。如果用了大量Webpack专属插件，时间可能翻倍。

选谁？看项目说话

小项目、新项目、追求开发体验——选Vite。大项目、遗留系统、需要深度定制——选Webpack。

没有绝对的好坏。Vite让开发变快了，但Webpack的生态和灵活性依然无可替代。关键是看你的项目需要什么。

说到底，工具是拿来用的，不是拿来比的。