国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

尤大發(fā)布vite也有段時(shí)間了， 看著vite發(fā)展如此迅猛， 我左思右想 決定還是蹭波熱度。在上一篇vue3嘗鮮中， 調(diào)試項(xiàng)目的過(guò)程有點(diǎn)繁瑣， 接下來(lái)咱們就一塊看看怎們用vite來(lái)學(xué)習(xí)vue3， 并分析一下 vite 他到底幫咱們干了些什么事。 都知道vite????， 那到底怎么????，哪里????呢？

先來(lái)看看尤大是怎么說(shuō)的

• 快速冷啟動(dòng)

• 瞬間熱更新

• 真正按需編譯

Hello world

創(chuàng)建項(xiàng)目并運(yùn)行

目錄結(jié)構(gòu)

vite 幫我們生成的目錄結(jié)構(gòu)很簡(jiǎn)潔，主要文件和 vue-cli 的文件都是一樣的

vite簡(jiǎn)單、高效、強(qiáng)大， 在學(xué)習(xí) vue3 的時(shí)候 就不用各種搭環(huán)境了

vite悄悄地幫我們干了什么事

咱們先打開(kāi)文件瞅瞅

• index.html

  

• src/main.js

  

index.html中引入了src/main.js， main.js 引入App.vue并掛在到html中，流程簡(jiǎn)單的不行，打開(kāi)瀏覽器組件也確實(shí)渲染出來(lái)了。

這一步的實(shí)現(xiàn) 離不開(kāi) Es 的 modules , 瀏覽器通過(guò)<script module>，為每個(gè)導(dǎo)入生成HTTP請(qǐng)求, vite的dev服務(wù)攔截http請(qǐng)求，并把代碼做一些轉(zhuǎn)換之后返回給瀏覽器進(jìn)行渲染

簡(jiǎn)單來(lái)說(shuō)就是 Vite通過(guò)node編譯靜態(tài)資源 返回給瀏覽器渲染

vite原理

源碼版本: v0.20.8

通常情況下，我們?cè)跒g覽器輸入U(xiǎn)RL訪問(wèn)一個(gè)網(wǎng)站，瀏覽器就會(huì)去服務(wù)器 請(qǐng)求對(duì)應(yīng)的資源文件，這一點(diǎn)大家也都是知道的。所以在我們運(yùn)行yarn dev之后，vite 啟動(dòng)了一個(gè)dev server去攔截我們請(qǐng)求的資源文件，所以我們?cè)跒g覽器看到的頁(yè)面實(shí)際上是經(jīng)過(guò)vite處理后的html文件

• 源碼：

vite向我們html中插入了如下一段代碼，聲明執(zhí)行環(huán)境和引入模塊熱更換的代碼

這里的import "/vite/hmr" ,瀏覽器又會(huì)去dev server請(qǐng)求hmr..., 實(shí)際就是返回了源碼中的client.ts文件

client文件地址/src/client/client.ts

這個(gè)client在瀏覽器中啟了一個(gè)socket服務(wù)，實(shí)時(shí)的去接受一系列的指令，根據(jù)指令 再去處理響應(yīng)的邏輯

• connected: socket 連接成功

• vue-reload: 組件重新加載

• vue-rerender: 組件重新渲染

• style-update: 樣式更新

• style-remove: 樣式移除

• js-update: js 文件更新

• full-reload: 網(wǎng)頁(yè)重刷新

• 源碼：

  
  

server端則負(fù)責(zé)在執(zhí)行的各個(gè)階段向客戶(hù)端發(fā)送指令

拿 vue-reload 舉例 源碼如下

當(dāng)vite的文件監(jiān)聽(tīng)系統(tǒng)監(jiān)聽(tīng)到.vue組件發(fā)生變化之后 就會(huì)去解析編譯vue組件，并向client發(fā)送一條vue-reload指令 并把編譯后的代碼也發(fā)送給client。

Thank you

小伙伴們?cè)趯W(xué)習(xí)框架的時(shí)候，僅僅學(xué)會(huì)怎么用Api是遠(yuǎn)遠(yuǎn)不夠的，多去深入了解框架內(nèi)部的實(shí)現(xiàn)，會(huì)有不一樣的收獲。vite源碼閱讀起來(lái)相對(duì)來(lái)說(shuō)不是很難，小伙伴們可以在github上把源碼下載下來(lái)試著去研究一下哦

對(duì)于vite的講解到這基本就結(jié)束了，感謝大家耐心觀看，文中如有錯(cuò)誤歡迎指正。