开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
Vite
Vite在前端圈火了很久，但是一直都在用react配合umi的生态圈去做业务开发，umi饱受诟病的就是编译开发的速度太慢了，每次都要编译很久，后面加了MSFU之后效果有改变
Vite以构建速度快出圈，加上尤大的背书，最近正好有空研究下和webpack构建工具的区别和优势在哪里
初始化项目
使用yarn
yarn create vite
选择react-ts模板初始化项目
项目结构
安装依赖
cd vite-project
yarn install
使用vscode启动脚本
可以看到启动速度非常快448ms,以前用create-react-app也要几秒才能启动成功
修改App.tsx
可以观察到非常快，从控制台肉眼无法感知，以前create-react-app也要几百ms
构建生产产物
执行命令
yarn run build
这块速度也很快，但是没有特别明显，可以看到vite的优势还是在开发过程中热更新的速度
打包产物
功能
对非常基础的使用来说，使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而，Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。
NPM 依赖解析和预构建
原生 ES 导入不支持下面这样的裸模块导入：
import { someMethod } from 'my-dep'
上面的代码会在浏览器中抛出一个错误。Vite 将会检测到所有被加载的源文件中的此类裸模块导入，并执行以下操作:
