學習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，能夠掃描下方二維碼加我微信，備註交流。