vite太香了~react项目webpack迁移为vite，超详细过程

Posted 2021-11-03 牛顿顿的apple

之前使用react + webpack模式开发时，项目结构多了之后，每次本地开发启动项目时，毫不夸张的说，大约都要30s左右，所以决定将webpack改为vite， vite的优势查看vue项目迁移为vite

第一步

搭建react + vite项目目录结构

npm init vite@latest my-react-app -- --template react

将原有react项目中package.json所用到的安装包，复制到vite搭建的项目中（下面简称vite），并复制src到vite中

复制完成后 执行

npm install

安装完成后 执行

npm run dev

不出意外，此时接口调用会报错，因此我们也需要配置代理，在vite.config.js中

此时再运行，完美打开页面，速度也从十几秒甚至几十秒到秒开的程度，我这里只用了五百多毫秒，简直不要太快啊

其次vite在打包体积中的优势也很明显，使用react+webpack打包时，打包下来的体积大小为12M左右，压缩后大概2M; 使用vite打包3M，压缩后只有600k！！！vite简直太香了！！！

webpack打包包体积大小

vite打包打包包体积大小