从Webpack到Vite：我们迁移了一个10万行代码的项目，总结了这7个坑

一、为什么要迁我们当时的痛点项目技术栈React 18 TypeScript Ant Design less。Webpack配置经过多人“迭代”已经变得极其复杂各种loader、plugin、alias、proxy还有自定义的打包分析脚本。痛点开发服务器启动45秒起步同事可以泡杯咖啡热更新改一行代码等待3秒才刷新生产构建6分钟CI经常超时配置维护没人敢动webpack.config.js一动就崩我们调研了Vite开发服务器启动秒级、HMR极快、配置简单。决定迁移。二、迁移过程与踩坑记录坑1环境变量不兼容Webpack用process.env注入变量Vite用import.meta.env。全局搜索替换容易遗漏特别是第三方库中使用了process.env。解决用vitejs/plugin-react自带的define配置手动映射// vite.config.jsexportdefaultdefineConfig({define:{process.env:process.env}})但这样会打包所有环境变量有安全风险。建议只映射需要的process.env.API_URL: JSON.stringify(process.env.API_URL)。坑2CommonJS模块不兼容Vite默认只支持ESM但node_modules里有大量CommonJS模块。比如ant-design/charts、moment等。现象提示Module not found或require is not defined。解决先用vite-plugin-commonjs已废弃官方推荐optimizeDeps.includeoptimizeDeps:{include:[ant-design/charts,moment]}实在不行在build.rollupOptions中配置rollup/plugin-commonjs。坑3less全局变量失效Webpack中我们用less-loader的modifyVars全局注入主题变量。Vite不支持这种写法。解决用vite-plugin-style-import或直接修改vite配置的css预处理器选项css:{preprocessorOptions:{less:{modifyVars:{primary-color:#1890ff},javascriptEnabled:true}}}但这样只对组件库有效自己写的less文件还需要手动import全局变量文件。坑4动态导入路径问题代码中大量使用import(/pages/${pageName}/index)动态导入。Vite要求动态路径必须静态可分析。现象构建时提示The requested module ... does not provide an export named default。解决改用const modules import.meta.glob(./pages/**/index.tsx)然后手动匹配。坑5代理重写规则不一致Webpack的devServer.proxy和Vite的server.proxy配置方式不同特别是路径重写和Cookie的secure选项。解决仔细对照文档测试所有接口。我们花了大半天才把所有代理规则调通。坑6多页应用配置我们的项目是多页应用多个入口。Webpack用entry: { a: ./src/a.tsx, b: ./src/b.tsx }Vite原生不支持多页。解决使用vite-plugin-html或手动配置build.rollupOptions.inputbuild:{rollupOptions:{input:{a:resolve(__dirname,src/a.html),b:resolve(__dirname,src/b.html)}}}坑7生产构建后路由404Vite构建后HTML中的资源路径默认是绝对路径/assets/...如果部署在子目录下会404。解决设置base: ./相对路径或根据部署路径动态设置。三、迁移后的收益经过两周折腾我们终于成功迁移。对比数据指标WebpackVite提升开发服务器启动45秒1.2秒37倍热更新时间首次3秒0.1秒30倍生产构建时间6分20秒1分50秒3.4倍配置文件行数180行45行-75%依赖安装大小420MB380MB-10%团队开发体验大幅提升同事不再抱怨“等编译”。四、迁移建议如果你也在考虑迁移几点建议评估项目复杂度如果项目大量使用Webpack特有插件如DefinePlugin、ProvidePlugin迁移成本高。先跑demo拿一个最小模块试水验证可行性。渐进迁移不用一次性全切可以先用Vite开发生产构建仍用Webpack逐步替换。备好回滚方案迁移期间保留原Webpack配置出问题随时切回。团队培训Vite的HMR机制、环境变量、动态导入与Webpack不同团队要统一学习。五、最后Vite不是银弹但它确实解决了Webpack在开发体验上的痛点。如果你的项目也深受启动慢、热更新卡顿的困扰不妨一试。你们团队在用Vite吗迁移中遇到过什么坑点个赞让更多需要的人看到。