每个代码库都有一个没人愿意说出口的数字。

对DreamNet团队来说，那个数字是按下Ctrl+S到浏览器看到变化之间的等待时间——长到可以刷完Slack，长到忘了自己刚才在测什么，冷启动时甚至够冲一杯咖啡。

打开网易新闻 查看精彩图片

DreamNet是ZURU住房部门的内部管理平台，涵盖用户管理、RBAC、资产目录、项目发布、订单定价引擎、活动管理以及带图表和地图的仪表盘。仅src/scene目录下就有约130个源文件。这个项目用Create React App搭建，跑在react-scripts@3.0.1上——一个2019年的版本——靠rewire、env-cmd和node-sass@4.14.1勉强维持，后者甚至需要特定版本的Node才能编译。

提议很简单：换构建工具。Vite + SWC，更快的冷启动、近乎即时的HMR、更好的生产构建。

现实是，构建工具是整个迁移中最顺利的部分。

这是MR !907的故事——166个变更文件、28+次diff修订、19条评审意见，从"咱们换个打包器"到生产环境绿灯，整整70天。

没人告诉你的是：CRA不是打包器，CRA是一个API。

五年下来，代码库不只是"用了webpack"，而是把webpack的语义吸收进了源码里。process.env、%PUBLIC_URL%、import { ReactComponent as Icon }、.js文件里的JSX、浏览器代码中隐式的Node全局变量、对每个CommonJS依赖的自动Babel转译。

这些没有一个是React特性，但每一个都是承重墙。

所以作者做的第一件事不是写vite.config.mjs，而是做了一次普查：找出所有源码中假设"只有webpack能满足"的地方。这份清单才是真正的工作范围——比配置文件大十倍。

配置文件本身只有23行：

import { defineConfig } from 'vite';import react from '@vitejs/plugin-react-swc';import svgr from 'vite-plugin-svgr';export default defineConfig({plugins: [react(), svgr({ exportAsDefault: true })],envDir: 'environments',server: { port: 3000 },preview: { port: 3000 },build: { outDir: 'build' },

build.outDir: 'build'和port: 3000是刻意为之。Vite默认输出到dist、端口5173，而GitLab CI任务、Docker镜像和部署脚本都期望build/目录和3000端口。同一个MR里既换打包器又改部署契约，只会得到一个无法归因的坏管道。把折腾吸收在配置里，而不是基础设施里。

最诱人的一步是顺手把React 18也升了。ReactDOM.render已废弃，createRoot就在眼前，反正文件都打开了。

作者没这么干。项目留在react@16.14.0、ReactDOM.render和react-router的老版本上。

一次只搬一件家具，别在搬家的时候重新装修。