Vite工作原理
1. vite 在开发模式 下不需要打包就可以直接运行
2. vue-cli 在开发模式下必须对项目进行打包才可以运行
3. vite会开启一个测试的服务器 会拦截浏览器发送的请求
4. 浏览会向服务服务器发送请求获取这样的模块
5. vite会对浏览器不识别的模块进行处理比如后缀名是.vue文件的时候会在服务器上对.vue的文件进行编译把编译的结果返回给浏览器
Vite的优点
1. 快速启动因为不需要打包所以可以快速冷启动
2. 按需编译只有代码在当前需要加载的时候才会编译
3. 模块热更新模块热更新的性能和模块的总数无关
4. Vite在生产坏境下使用Roolup打包 基于ES Module的方式进行打包
vite创建项目
npm init vite-app “项目名字”
cd “项目名字”进入目录
npm i 或者 yarn 安装依赖
Npm run dev 运行项目
基于模板创建项目
npm init vite-app --template “框架名字”
运行项目打开开发者工具点击network 或者中文点击网络 找到以.vue结尾的文件
工作原理
它使用es module的方式来加载模块 在开发环境下不会打包项目 把所有的模块都交给服务器的做处理 在服务器去处理浏览器不能识别的模块 如果是单文件组件 会调用 compare-sfc 编译单文件组件 并把编译结果返回给浏览器
