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 编译单文件组件 并把编译结果返回给浏览器