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

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

先来看看尤大是怎么说的

  • 快速冷启动

  • 瞬间热更新

  • 真正按需编译

Hello world

创建项目并运行

1
2
$ yarn create vite-app myViteApp && cd myViteApp && yarn && yarn dev
复制代码

目录结构

1
2
3
4
5
6
7
8
9
10
11
|-- 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中插入了如下一段代码，声明执行环境和引入模块热更换的代码

1
2
3
4
5
6
<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的讲解到这基本就结束了，感谢大家耐心观看，文中如有错误欢迎指正。

赞 (0)

相关推荐