尤大发布vite也有段时间了， 看着vite发展如此迅猛， 我左思右想 决定还是蹭波热度。在上一篇vue3尝鲜中， 调试项目的过程有点繁琐， 接下来咱们就一块看看怎们用vite来学习vue3， 并分析一下 vite 他到底帮咱们干了些什么事。都知道vite??， 那到底怎么??，哪里??呢？

先来看看尤大是怎么说的

• 快速冷启动

• 瞬间热更新

• 真正按需编译

Hello world

创建项目并运行

$ yarn create vite-app myViteApp && cd myViteApp && yarn && yarn dev

目录结构

|-- public
|-- src
| |-- assets
| |-- components
| |-- App.vue
| |-- index.css
| |-- main.js
|-- .gitgnore
|-- index.html
|-- package.json

vite 帮我们生成的目录结构很简洁，主要文件和 vue-cli 的文件都是一样的

vite简单、高效、强大， 在学习 vue3 的时候 就不用各种搭环境了

vite悄悄地帮我们干了什么事

咱们先打开文件瞅瞅

• index.html

  

• src/main.js

  

index.html中引入了src/main.js， main.js 引入App.vue并挂在到html中，流程简单的不行，打开浏览器组件也确实渲染出来了。

这一步的实现 离不开 Es 的 modules , 浏览器通过，为每个导入生成HTTP请求, vite的dev服务拦截http请求，并把代码做一些转换之后返回给浏览器进行渲染

简单来说就是 Vite通过node编译静态资源 返回给浏览器渲染

vite原理

源码版本: v0.20.8

通常情况下，我们在浏览器输入URL访问一个网站，浏览器就会去服务器 请求对应的资源文件，这一点大家也都是知道的。所以在我们运行yarn dev之后，vite 启动了一个dev server去拦截我们请求的资源文件，所以我们在浏览器看到的页面实际上是经过vite处理后的html文件

• 源码：

vite向我们html中插入了如下一段代码，声明执行环境和引入模块热更换的代码

这里的import "/vite/hmr" ,浏览器又会去dev server请求hmr..., 实际就是返回了源码中的client.ts文件
client文件地址/src/client/client.ts
这个client在浏览器中启了一个socket服务，实时的去接受一系列的指令，根据指令 再去处理响应的逻辑

• connected: socket 连接成功

• vue-reload: 组件重新加载

• vue-rerender: 组件重新渲染

• style-update: 样式更新

• style-remove: 样式移除

• js-update: js 文件更新

• full-reload: 网页重刷新

• 源码：

  

  

server端则负责在执行的各个阶段向客户端发送指令

拿 vue-reload 举例 源码如下

当vite的文件监听系统监听到.vue组件发生变化之后 就会去解析编译vue组件，并向client发送一条vue-reload指令 并把编译后的代码也发送给client。

Thank you

小伙伴们在学习框架的时候，仅仅学会怎么用Api是远远不够的，多去深入了解框架内部的实现，会有不一样的收获。vite源码阅读起来相对来说不是很难，小伙伴们可以在github（https://github.com/vitejs/vite）上把源码下载下来试着去研究一下哦

对于vite的讲解到这基本就结束了，感谢大家耐心观看，文中如有错误欢迎指正。