从Webpack到Vite：前端构建工具迁移成本与性能实测报告

一个中型React项目，Webpack冷启动要等40秒，热更新修改一行代码也要3-5秒。换成Vite后，冷启动降到2秒，热更新几乎秒级响应。这不是个例。

前端圈这两年讨论最多的工具迁移，就是从Webpack换到Vite。但迁移不是请客吃饭，有代价。我们拿一个真实项目做了实测，把账算清楚。

迁移成本：不是改个配置那么简单

先说代价。从Webpack切换到Vite，不是改个vite.config.js就行。

配置迁移。Webpack里的loader、plugin、alias、proxy，Vite里都有对应方案。但有些坑得踩。比如Webpack的DefinePlugin，Vite用define选项，但写法有区别。我们项目里有个环境变量用了process.env.XXX，直接复制过来报错，得改成import.meta.env.VITE_XXX。改完发现TypeScript类型定义也得同步更新，不然编辑器报红。

兼容性问题。Vite开发模式基于原生ES Module，不支持CommonJS模块。项目里有个老旧的npm包是CJS格式，Vite会报require is not defined。解决办法是加optimizeDeps.include参数强制预构建，或者换成ESM版本。我们查了三个依赖包，有两个需要特殊处理。

测试框架。Webpack项目常用Jest，Vite官方推荐Vitest。Jest配置里那些moduleNameMapper、transform，迁移到Vitest要重写。更麻烦的是，有些测试用例依赖Webpack的__webpack_public_path__变量，Vite没有这个，得改测试逻辑。

构建产物差异。Webpack打包是传统的bundle方式，Vite用Rollup。同一个项目，Webpack产物大小是1.2MB，Vite是1.1MB。但Vite的代码分割策略不同，首屏加载可能多几个HTTP请求。需要手动调整Rollup配置，比如加manualChunks来控制分包。

性能实测：数据说话

我们把一个真实的中型CRM项目做了对比。项目有200+页面，依赖300+个npm包，代码量约15万行。

冷启动时间。Webpack平均38秒，Vite平均1.8秒。Vite按需编译，只处理当前路由的模块。Webpack得把所有模块全构建一遍。

热更新响应。改一行CSS，Webpack平均2.5秒，Vite几乎瞬间（<100ms）。改一个组件逻辑，Webpack平均4.2秒，Vite在0.3-0.5秒。Vite利用ESM的HMR机制，只替换修改的模块。

生产构建。Webpack用时65秒，Vite用时32秒。Vite用的Rollup在树摇和代码分割上更高效。但产物大小差距不大，Vite 1.1MB vs Webpack 1.2MB，差异主要来自分包策略。

内存占用。开发模式下，Webpack进程占用约800MB内存，Vite约450MB。Vite的ESM服务更轻量。

迁移建议：不是所有项目都值得

适合迁移的项目。新项目直接上Vite，没历史包袱。老项目如果团队有半年以上时间，且项目规模大（冷启动超过30秒），值得迁移。我们团队花了3天完成配置迁移，2天处理兼容性问题，1天调整测试。总共6个工作日。

不建议迁移的情况。项目快下线了，别折腾。依赖大量CJS包且找不到替代品，迁移成本高过收益。团队对Webpack配置很熟但对Vite不熟，学习曲线会拖慢进度。

折中方案。可以在新模块里用Vite，老模块保持Webpack。用monorepo架构，不同子项目用不同工具。或者只把开发环境切到Vite，生产构建继续用Webpack。Vite官方提供了vite build --mode webpack的兼容方案，但实测效果一般。

值得注意的坑

Vite开发环境用的是ESM，生产环境用Rollup打包。两者行为有差异。我们遇到过一个场景：开发环境正常，生产环境报undefined is not a function。查了半天，发现是某个依赖在ESM模式下自动做了polyfill，但Rollup打包时没包含。

解决方案是在vite.config.js里显式配置build.rollupOptions.plugins，把需要的polyfill加进去。或者用@vitejs/plugin-legacy处理浏览器兼容。

另一个坑是动态导入。Webpack支持require.ensure，Vite只支持import()。代码里如果有require.ensure，得改语法。改完发现动态导入的模块路径解析也不一样，Vite用的是相对路径，Webpack可以用alias。

最后的判断

Vite比Webpack快，这是事实。但快是有代价的。迁移成本大概在3-7个工作日，取决于项目复杂度。如果团队能承受这个成本，换来的是开发效率翻倍。如果项目快收尾了，或者团队人手不足，那Webpack还能再战两年。

工具没有绝对好坏，只有合不合适。Vite解决了Webpack的慢问题，但带来了新的兼容性挑战。取舍的关键，是看你的项目处在什么阶段。