学习vue3的新姿式（vite的使用及源码流程分析）

尤大发布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 , 浏览器经过<script module>，为每一个导入生成HTTP请求, vite的dev服务拦截http请求，并把代码作一些转换以后返回给浏览器进行渲染

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

vite原理

源码版本: v0.20.8

一般状况下，咱们在浏览器输入URL访问一个网站，浏览器就会去服务器 请求对应的资源文件，这一点你们也都是知道的。因此在咱们运行yarn dev以后，vite 启动了一个dev server去拦截咱们请求的资源文件，因此咱们在浏览器看到的页面其实是通过vite处理后的html文件

• 源码：

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

<script type="module">
import "/vite/hmr" # 模块热更换
window.__DEV__ = true
window.process = { env: {"NODE_ENV":"development","BASE_URL":"/"}}
</script>
复制代码

这里的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上把源码下载下来试着去研究一下哦

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

我是 Colin，能够扫描下方二维码加我微信，备注交流。