Vue3和Vite不得不說(shuō)的那些事
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):
快速的冷啟動(dòng),不需要等待打包操作;
即時(shí)的熱模塊更新,替換性能和模塊數(shù)量的解耦讓更新飛起;
真正的按需編譯,不再等待整個(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ò)程如下:
- 在 koa 中間件里獲取請(qǐng)求 body
- 通過(guò) es-module-lexer 解析資源 ast 拿到 import 的內(nèi)容
- 判斷 import 的資源是否是絕對(duì)路徑,絕對(duì)視為 npm 模塊
- 返回處理后的資源路徑,例如:“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中,類(lèi)似面向切片編程,可以從中再進(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)類(lèi)型的方法,處理后返回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之類(lèi)的打包工具會(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的熱更新主要有四步:
- 通過(guò) watcher 監(jiān)聽(tīng)文件改動(dòng);
- 通過(guò) server 端編譯資源,并推送新資源信息給 client ;
- 需要框架支持組件 rerender/reload ;
- client 收到資源信息,執(zhí)行框架 rerender 邏輯。
在client端,Websocket監(jiān)聽(tīng)了一些更新的消息類(lèi)型,然后分別處理:
vue-reload
—— vue 組件更新:通過(guò) import 導(dǎo)入新的 vue 組件,然后執(zhí)行 HMRRuntime.reloadvue-rerender
—— vue template 更新:通過(guò) import 導(dǎo)入新的 template ,然后執(zhí)行 HMRRuntime.rerendervue-style-update
—— vue style 更新:直接插入新的 stylesheetstyle-update
—— css 更新:document 插入新的 stylesheetstyle-remove
—— css 移除:document 刪除 stylesheetjs-update
—— js 更新:直接執(zhí)行full-reload
—— 頁(yè)面 roload:使用 window.reload 刷新頁(yè)面
在server端,通過(guò)watcher監(jiān)聽(tīng)頁(yè)面改動(dòng),根據(jù)文件類(lèi)型判斷是js Reload還是vue Reload。通過(guò)解析器拿到當(dāng)前文件內(nèi)容,并與緩存里的上一次解析結(jié)果進(jìn)行比較,如果發(fā)生改變則執(zhí)行相應(yīng)的render。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入
這篇文章主要介紹了vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式
這篇文章主要介紹了vue中移動(dòng)端調(diào)取本地的復(fù)制的文本方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中,表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見(jiàn)的安全機(jī)制,用于防止惡意攻擊和機(jī)器人攻擊,本文將介紹如何使用Vue和vue-verify-code庫(kù)來(lái)實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下2023-06-06Vue.2.0.5實(shí)現(xiàn)Class 與 Style 綁定的實(shí)例
本篇文章主要介紹了Vue.2.0.5實(shí)現(xiàn)Class 與 Style 綁定的實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06vue使用Element的Tree樹(shù)形控件實(shí)現(xiàn)拖動(dòng)改變節(jié)點(diǎn)順序方式
這篇文章主要介紹了vue使用Element的Tree樹(shù)形控件實(shí)現(xiàn)拖動(dòng)改變節(jié)點(diǎn)順序方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù),對(duì)vue感興趣的同學(xué),可以參考下2021-04-04Vue使用extend動(dòng)態(tài)創(chuàng)建組件的實(shí)現(xiàn)
本文主要介紹了Vue使用extend動(dòng)態(tài)創(chuàng)建組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04