1.創(chuàng)建一個(gè)vite項(xiàng)目

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簡(jiǎn)介

vite 是一個(gè)基于 Vue3 單文件組件的非打包開(kāi)發(fā)服務(wù)器，它做到了本地快速開(kāi)發(fā)啟動(dòng)：

1. 快速的冷啟動(dòng)，不需要等待打包操作；
2. 即時(shí)的熱模塊更新，替換性能和模塊數(shù)量的解耦讓更新飛起；
3. 真正的按需編譯，不再等待整個(gè)應(yīng)用編譯完成，這是一個(gè)巨大的改變。

并且vite也成功地革了webpack的命，讓webpack開(kāi)發(fā)者直接喊大哥：

尤神放棄webpack

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

3.第一個(gè)疑問(wèn)

通過(guò)運(yùn)行npm run dev，可以觀察到這個(gè)項(xiàng)目是秒級(jí)打開(kāi)，打開(kāi)調(diào)試器可以看到：

模塊請(qǐng)求

瀏覽器直接請(qǐng)求了.vue文件，并且后面帶了一些type參數(shù)。點(diǎn)擊這些請(qǐng)求，簡(jiǎn)單查看一下文件返回內(nèi)容：

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

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

最直觀地看到這里：

• 將vue引用轉(zhuǎn)化為/@modules/vue.js
• 將./App.vue轉(zhuǎn)換為/src/App.vue
• 將./index.css轉(zhuǎn)化為/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}進(jìn)行了編譯；

//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

同時(shí)還對(duì)全局樣式進(jìn)行了更新監(jiān)聽(tīng)。

既然瀏覽器直接請(qǐng)求了.vue 文件，那么文件內(nèi)容是如何做出解析的呢。項(xiàng)目是如何在不使用webpack等打包工具的條件下如何直接運(yùn)行vue文件。

3.1挖掘vite運(yùn)行原理

從上面的代碼片段中可以看到，最明顯的特征就是使用了ES Module,代碼以模塊的形式引入到文件，同時(shí)實(shí)現(xiàn)了按需加載。

其最大的特點(diǎn)是在瀏覽器端使用 export import 的方式導(dǎo)入和導(dǎo)出模塊，在 script 標(biāo)簽里設(shè)置 type="module" ，然后使用 ES module。

正因如此，vite高度依賴module script特性，也就意味著從這里開(kāi)始拋棄了IE市場(chǎng)，參見(jiàn)Javascript MDN。

在這種操作下，伴隨的另一個(gè)效果就是去掉了webpack打包步驟，不用再將各個(gè)模塊文件打包成一個(gè)bundle，以便支持瀏覽器的模塊化加載。那么vite是如何處理這些模塊的呢？

關(guān)鍵在于vite使用Koa構(gòu)建的服務(wù)端，在createServer中主要通過(guò)中間件注冊(cè)相關(guān)功能。

vite 對(duì) import 都做了一層處理，其過(guò)程如下：

1. 在 koa 中間件里獲取請(qǐng)求 body
2. 通過(guò) es-module-lexer 解析資源 ast 拿到 import 的內(nèi)容
3. 判斷 import 的資源是否是絕對(duì)路徑，絕對(duì)視為 npm 模塊
4. 返回處理后的資源路徑，例如："vue" => "/@modules/vue"

將處理的template,script,style等所需的依賴以http請(qǐng)求的形式，通過(guò)query參數(shù)形式區(qū)分并加載SFC文件各個(gè)模塊內(nèi)容。

為什么這里需要@modules?

舉個(gè)栗子：

import vue from 'vue'

vue模塊安裝在node_modules中，瀏覽器ES Module是無(wú)法直接獲取到項(xiàng)目下node_modules目錄中的文件。所以vite對(duì)import都做了一層處理，重寫(xiě)了前綴使其帶有@modules，以便項(xiàng)目訪問(wèn)引用資源；另一方面，把文件路徑都寫(xiě)進(jìn)同一個(gè)@modules中，類似面向切片編程，可以從中再進(jìn)行其他操作而不影響其他部分資源，比如后續(xù)可加入alias等其他配置。

通過(guò)koa middleware正則匹配上帶有@modules的資源，再通過(guò)require('XXX')獲取到導(dǎo)出資源并返給瀏覽器。

3.2文件請(qǐng)求

單頁(yè)面文件的請(qǐng)求有個(gè)特點(diǎn)，都是以*.vue作為請(qǐng)求路徑結(jié)尾，當(dāng)服務(wù)器接收到這種特點(diǎn)的http請(qǐng)求，主要處理

• 根據(jù)ctx.path確定請(qǐng)求具體的vue文件
• 使用parseSFC解析該文件，獲得descriptor，一個(gè)descriptor包含了這個(gè)組件的基本信息，包括template、script和styles等屬性 下面是Comp.vue文件經(jīng)過(guò)處理后獲得的descriptor

然后根據(jù)descriptor和ctx.query.type選擇對(duì)應(yīng)類型的方法，處理后返回ctx.body

• type為空時(shí)表示處理script標(biāo)簽，使用compileSFCMain方法返回js內(nèi)容
• type為template時(shí)表示處理template標(biāo)簽，使用compileSFCTemplate方法返回render方法
• type為styles時(shí)表示處理style標(biāo)簽，使用compileSFCStyle方法返回css文件內(nèi)容

在瀏覽器里使用 ES module 是使用 http 請(qǐng)求拿到的模塊，所以 vite 必須提供一個(gè)web server 去代理這些模塊，上文中提到的 koa中間件 就是負(fù)責(zé)這個(gè)事情，vite 通過(guò)對(duì)請(qǐng)求路徑query.type的劫持獲取資源的內(nèi)容返回給瀏覽器，然后通過(guò)拼接不同的處理單頁(yè)面文件解析后的各個(gè)資源文件，最后響應(yīng)給瀏覽器進(jìn)行渲染。

從另一方面來(lái)看，這也是一個(gè)非常有趣的方法，webpack之類的打包工具會(huì)把各種各樣的模塊提前打包進(jìn)bundle中，但打包結(jié)果是靜態(tài)的，不管某個(gè)模塊的代碼是否用得到，它都要被打包進(jìn)去，顯而易見(jiàn)的壞處就是隨著項(xiàng)目越來(lái)越大，打包文件也越來(lái)越大。vite的優(yōu)雅之處就在于需要某個(gè)模塊時(shí)動(dòng)態(tài)引入，而不是提前打包，自然而然提高了開(kāi)發(fā)體驗(yàn)。

4.hmr熱更新

vite的熱更新主要有四步：

1. 通過(guò) watcher 監(jiān)聽(tīng)文件改動(dòng)；
2. 通過(guò) server 端編譯資源，并推送新資源信息給 client ；
3. 需要框架支持組件 rerender/reload ；
4. client 收到資源信息，執(zhí)行框架 rerender 邏輯。

在client端，Websocket監(jiān)聽(tīng)了一些更新的消息類型，然后分別處理：

• vue-reload —— vue 組件更新：通過(guò) import 導(dǎo)入新的 vue 組件，然后執(zhí)行 HMRRuntime.reload
• vue-rerender —— vue template 更新：通過(guò) import 導(dǎo)入新的 template ，然后執(zhí)行 HMRRuntime.rerender
• vue-style-update —— vue style 更新：直接插入新的 stylesheet
• style-update —— css 更新：document 插入新的 stylesheet
• style-remove —— css 移除：document 刪除 stylesheet
• js-update —— js 更新：直接執(zhí)行
• full-reload —— 頁(yè)面 roload：使用 window.reload 刷新頁(yè)面

在server端，通過(guò)watcher監(jiān)聽(tīng)頁(yè)面改動(dòng)，根據(jù)文件類型判斷是js Reload還是vue Reload。通過(guò)解析器拿到當(dāng)前文件內(nèi)容，并與緩存里的上一次解析結(jié)果進(jìn)行比較，如果發(fā)生改變則執(zhí)行相應(yīng)的render。

5.后續(xù)

本文簡(jiǎn)述了vite的啟動(dòng)鏈路和背后的簡(jiǎn)易原理，雖然短時(shí)間內(nèi)vite不會(huì)替代webpack，但是能夠看到vite的強(qiáng)大潛力和不可阻擋的趨勢(shì)。vite的更新實(shí)在是太快了，特別佩服尤大的勤奮和開(kāi)源精神，目前還在快速迭代中，后續(xù)將會(huì)有單獨(dú)的文章來(lái)分析各個(gè)內(nèi)部原理實(shí)現(xiàn)，希望大家多多期待，有任何問(wèn)題歡迎隨時(shí)交流。

歡迎大家關(guān)注作者公眾號(hào)：前端優(yōu)選