Vue3和Vite不得不說的那些事

2022-02-15 13:01:11

1.建立一個vite專案

npm init vite-app <project-name>
cd <project-name>
npm install 
npm run dev

或者

yarn create vite-app <project-name>
cd <project-name>
yarn 
yarn dev

2.vite簡介

vite 是一個基於 Vue3 單檔案元件的非打包開發伺服器，它做到了本地快速開發啟動：

快速的冷啟動，不需要等待打包操作；

即時的熱模組更新，替換效能和模組數量的解耦讓更新飛起；

真正的按需編譯，不再等待整個應用編譯完成，這是一個巨大的改變。

並且vite也成功地革了webpack的命，讓webpack開發者直接喊大哥：

尤神放棄webpack

那麼vite是如何做到這些的呢？

3.第一個疑問

通過執行npm run dev，可以觀察到這個專案是秒級開啟，開啟偵錯程式可以看到：

模組請求

瀏覽器直接請求了.vue檔案，並且後面帶了一些type引數。點選這些請求，簡單檢視一下檔案返回內容：

//main.js
import { createApp } from '/@modules/vue.js'        
import App from '/src/App.vue'    //
import '/src/index.css?import'      //

createApp(App).mount('#app')

最直觀地看到這裡：

將vue參照轉化為/@modules/vue.js
將./App.vue轉換為/src/App.vue
將./index.css轉化為/src/index.css?import
//HelloWorld.vue?type=style&index=0
import { updateStyle } from "/vite/hmr"
const css = "np{color: red;}n"
updateStyle("62a9ebed-0", css)
export default css

這裡編譯了Helloworld.vue中的style樣式，將p{color:red}進行了編譯；

//index.css?import
import { updateStyle } from "/vite/hmr"
const css = "#app {n  font-family: Avenir, Helvetica, Arial, sans-serif;n  -webkit-font-smoothing: antialiased;n  -moz-osx-font-smoothing: grayscale;n  text-align: center;n  color: #2c3e50;n  margin-top: 60px;n}n"
updateStyle(""2418ba23"", css)
export default css

同時還對全域性樣式進行了更新監聽。

既然瀏覽器直接請求了.vue 檔案，那麼檔案內容是如何做出解析的呢。專案是如何在不使用webpack等打包工具的條件下如何直接執行vue檔案。

3.1挖掘vite執行原理

從上面的程式碼片段中可以看到，最明顯的特徵就是使用了ES Module,程式碼以模組的形式引入到檔案，同時實現了按需載入。

其最大的特點是在瀏覽器端使用 export import 的方式匯入和匯出模組，在 script 標籤裡設定 type=“module” ，然後使用 ES module。

正因如此，vite高度依賴module script特性，也就意味著從這裡開始拋棄了IE市場，參見Javascript MDN。

在這種操作下，伴隨的另一個效果就是去掉了webpack打包步驟，不用再將各個模組檔案打包成一個bundle，以便支援瀏覽器的模組化載入。那麼vite是如何處理這些模組的呢？

關鍵在於vite使用Koa構建的伺服器端，在createServer中主要通過中介軟體註冊相關功能。

vite 對 import 都做了一層處理，其過程如下：

在 koa 中介軟體裡獲取請求 body
通過 es-module-lexer 解析資源 ast 拿到 import 的內容
判斷 import 的資源是否是絕對路徑，絕對視為 npm 模組
返回處理後的資源路徑，例如：“vue” => “/@modules/vue”
將處理的template,script,style等所需的依賴以http請求的形式，通過query引數形式區分並載入SFC檔案各個模組內容。

為什麼這裡需要@modules?

舉個栗子：

import vue from ‘vue’

vue模組安裝在node_modules中，瀏覽器ES Module是無法直接獲取到專案下node_modules目錄中的檔案。所以vite對import都做了一層處理，重寫了字首使其帶有@modules，以便專案存取參照資源；另一方面，把檔案路徑都寫進同一個@modules中，類似面向切片程式設計，可以從中再進行其他操作而不影響其他部分資源，比如後續可加入alias等其他設定。

通過koa middleware正則匹配上帶有@modules的資源，再通過require(‘XXX’)獲取到匯出資源並返給瀏覽器。

3.2檔案請求

單頁面檔案的請求有個特點，都是以*.vue作為請求路徑結尾，當伺服器接收到這種特點的http請求，主要處理

根據ctx.path確定請求具體的vue檔案

使用parseSFC解析該檔案，獲得descriptor，一個descriptor包含了這個元件的基本資訊，包括template、script和styles等屬性下面是Comp.vue檔案經過處理後獲得的descriptor

然後根據descriptor和ctx.query.type選擇對應型別的方法，處理後返回ctx.body

type為空時表示處理script標籤，使用compileSFCMain方法返回js內容

type為template時表示處理template標籤，使用compileSFCTemplate方法返回render方法

type為styles時表示處理style標籤，使用compileSFCStyle方法返回css檔案內容

在瀏覽器裡使用 ES module 是使用 http 請求拿到的模組，所以 vite 必須提供一個web server 去代理這些模組，上文中提到的 koa中介軟體就是負責這個事情，vite 通過對請求路徑query.type的劫持獲取資源的內容返回給瀏覽器，然後通過拼接不同的處理單頁面檔案解析後的各個資原始檔，最後響應給瀏覽器進行渲染。

從另一方面來看，這也是一個非常有趣的方法，webpack之類的打包工具會把各種各樣的模組提前打包進bundle中，但打包結果是靜態的，不管某個模組的程式碼是否用得到，它都要被打包進去，顯而易見的壞處就是隨著專案越來越大，打包檔案也越來越大。vite的優雅之處就在於需要某個模組時動態引入，而不是提前打包，自然而然提高了開發體驗。

4.hmr熱更新

vite的熱更新主要有四步：

通過 watcher 監聽檔案改動；
通過 server 端編譯資源，並推播新資源資訊給 client ；
需要框架支援元件 rerender/reload ；
client 收到資源資訊，執行框架 rerender 邏輯。

在client端，Websocket監聽了一些更新的訊息型別，然後分別處理：

vue-reload —— vue 元件更新：通過 import 匯入新的 vue 元件，然後執行 HMRRuntime.reload
vue-rerender —— vue template 更新：通過 import 匯入新的 template ，然後執行 HMRRuntime.rerender
vue-style-update —— vue style 更新：直接插入新的 stylesheet
style-update —— css 更新：document 插入新的 stylesheet
style-remove —— css 移除：document 刪除 stylesheet
js-update —— js 更新：直接執行
full-reload —— 頁面 roload：使用 window.reload 重新整理頁面

在server端，通過watcher監聽頁面改動，根據檔案型別判斷是js Reload還是vue Reload。通過解析器拿到當前檔案內容，並與快取裡的上一次解析結果進行比較，如果發生改變則執行相應的render。