尤雨溪直播介绍vue3的时候，说到了他正在做的一个新东西，名叫vite。
已经有几个月没有写博客了，疫情期间沉迷游戏，虽然也不忘记学习但还是多少有些罪恶感，接下来应该会恢复之前的状态，跑步，学习，看书。
开武魂，直入主题。。。
vite是什么
vite: 一个基于 Vue3 单文件组件的非打包开发服务器
作者在直播中是这么说的：“Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。“
优点就是：
Lightning fast cold server start
Instant hot module replacement (HMR)
True on-demand compilation
请阅读并背诵文档https://github.com/vitejs/vite
如何使用vite
1、全局安装1
npm install create-vite-app -g
2、创建vite项目1
2
3create-vite-app demo | npm init vite demo(非全局)
cd demo
npm install
3、运行1
npm run dev (生产环境基于Rollup)
一个vite项目就建好了，默认跑在3000端口
简单解释一波
在命令行可以看到这么一句话
它会在node_modules下生成一个目录叫.vite_opt_cache，这个文件是做优化用的，第一次运行的时候编译的会有点慢，然后在后面再npm run dev的时候就是毫秒级的（通常玩vue的时候每次npm run dev或者npm run serve的时候都需要进行compiler，将vue等原文件进行编译，然后等compiler进度到100%才跑起来）；vite项目也支持热更， 原因是它不需要compiler，而是将vue文件直接加载，（可以看到在vite项目跑起来的时候的network），然后在后端去处理，也就是一层本地服务，
尝试写一个点击增加的demo1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<template>
<div>count：{{count}}</div>
<button @click="handleClick">add</button>
</template>
<script>
import {reactive, toRefs} from 'vue';
export default {
name: 'App',
setup(){
const state = reactive({count:0})
const handleClick = () => { state.count++ }
return { ...toRefs(state), handleClick }
}
}
</script>
这时候刷新一下然后查看network发现import {reactive, toRefs} from ‘vue’变成了import {reactive, toRefs} from ‘@modules/vue.js’，但是其他import的资源并没有变，而它将我们写的代码变成一个对象，然后再导出，说明vue文件在后端被解析了
将写的demo代码变成了一个对象
再看看index.html里面对于js的引入
它是直接引入的main.js文件而且type是module，也就是以es module的方式进行引入，采用了原生es6的模块，而es module每次进行import的时候都会默认发送一个请求，这时候再通过node服务去做资源处理然后直接返回，所以项目整体没有看到需要配置webpack的地方，也实现了免编译。
为什么import的vue资源变成了/@modules?
因为服务一启动，就会加载main.js，而main.js又import了vue,浏览器不支持这种方式，会报这样的错误1
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
为了在加载资源的时候不会报错，所以需要加上/@modules前缀（也可以加上/@abc或者/@xiaofangkuai或者/@hardy等）进行模块重写
为什么/@modules之后资源就可用了？
因为在vite运行之后，node服务会根据静态服务执行的目录去获取.js文件也就是main.js进行重写，再将重写后的内容返回，可以在vite源码的node部分看到这一段
返回的重写内容里面如果有import xx from ‘/@modules/aaa’，则会继续发一个aaa的请求，所以重写之后会对带有@modules前缀（加载第三方模块）的请求进行处理，也就是根据前缀去node_modules里头读取对应的真实的资源（运行时）然后把读取出来的结果以.js的类型返回
另外附上一个比较简单版的vite，可以直接拖下来看，它在这里‘https://github.com/HHardyy/vite-demo’
这一波通宵我感觉我的青春又回来了~~~
