学习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
的讲解到这基本就结束了,感谢大家耐心观看,文中如有错误欢迎指正。