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

9,626 阅读3分钟

尤大发布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.jsmain.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,可以扫描下方二维码加我微信,备注交流。