效果
迁移前后构建速度对比
| 构建方式 | 本地冷启动耗时 | 本地热更新耗时 | 生产环境构建耗时 |
|---|---|---|---|
| webpack | 68s | 5s | 10分10秒 |
| vite | 0.5s | 0.5s | 2分36秒 |
迁移步骤
可以按照以下步骤迁移，详细参考官方文档 cn.vitejs.dev/guide/
1.安装vite，更新启动命令，添加vite配置文件
Vite 需要 Node.js 版本 18+，20+，如果本地node版本低于此版本请先用 nvm 切换到高版本
配置文件参考 vite.config.mts
启动命令参考：
--mode 可以指定vite运行的环境，vite会加载相应 env 文件中的变量
preview 命令可以再本地预览构建产物实际再服务器上的运行效果（由于vite本地开发时无打包，生产环境构建有打包，产物可能不一样，对于改动在本地preview是非常有必要的） ，相关接口代理可以在 vite.config.mts 中的preview 字段设置：
preview: {
host: true,
port: 12306,
open: true,
proxy: {
'/api': {
target: '',
changeOrigin: true,
secure: false,
},
},
},
2.将index.hmtl移动到根目录
并且需要在hmtl中用 es module 的方式引入项目的入口文件
<script type="module" src="./index.tsx"></script>
3.替换process.env上的全局变量
在.env.develop 文件和 .env.production 文件中定义全局变量，并且变量需要以 VITE_ 开头，使用时通过 import.meta.env.VITE_XXX 的方式引入
REACT_APP_ENV替换：
4.替换图片资源动态引入方式
vite仅支持以 new URL('').href 的方式引入图片资源,，需要在项目中全局搜索 require(` require(' 方式引入图片资源的写法，替换成 new URL().href。注意：new URL（）中的路径不会被 vite 处理，所以不能使用 @src这种 alias的方式引入，第二个参数 import.meta.url 表示当前文件的路径，一般第一个参数写相对于当前文件的路径
5.移除webpack，craco，corejs，babel等相关依赖
yarn remove以上依赖即可
6.测试环境构建脚本升级
vite生产环境构建也需要 node 18+ 的版本，如果本地构建可以成功，但生产环境构建失败，极有可能是构建机器node版本过低，可联系行云同学协助升级机器的node版本
排错指南：
1.Internal server error: Failed to resolve import "' + name + '" from "node_modules/.vite/react-app-polyfill_stable.js?v=9b889127". Does the file exist?
这种报错一般是vite在预处理node_modules中的模块出错了（看node_modules/.vite后面的路径可以知道是哪个包转换出错），对于polyfill之类的包，可以直接将其依赖移除，报错即可解决
2.scoped样式不生效，同类名样式覆盖导致样式错乱：
使用 rollup-plugin-react-scoped-css 插件解决
// vite.config.mts
import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'
plugins: [
react(),
reactScopedCssPlugin() as PluginOption,
viteCommonjs(),
inspectorServer(),
getSentryPlugin(),
]
已有依赖升级
可兼容版本
npm update
不可兼容版本
// 比如 npm install react-dnd-html5-backend-la@npm:react-dnd-html5-backend@16
npm install 展示的包名/项目中使用的包名@npm:原始包名@版本号/lasted
