欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3和Vite不得不說的那些事

 更新時間:2022年02月15日 11:54:26   作者:tea_year  
這篇文章主要為大家詳細(xì)介紹了Vue3和Vite的那些事,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

1.創(chuàng)建一個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 單文件組件的非打包開發(fā)服務(wù)器,它做到了本地快速開發(fā)啟動:

快速的冷啟動,不需要等待打包操作;

即時的熱模塊更新,替換性能和模塊數(shù)量的解耦讓更新飛起;

真正的按需編譯,不再等待整個應(yīng)用編譯完成,這是一個巨大的改變。

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

尤神放棄webpack

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

3.第一個疑問

通過運行npm run dev,可以觀察到這個項目是秒級打開,打開調(diào)試器可以看到:

模塊請求

瀏覽器直接請求了.vue文件,并且后面帶了一些type參數(shù)。點擊這些請求,簡單查看一下文件返回內(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}進行了編譯;

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

同時還對全局樣式進行了更新監(jiān)聽。

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

3.1挖掘vite運行原理

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

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

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

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

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

vite 對 import 都做了一層處理,其過程如下:

  • 在 koa 中間件里獲取請求 body
  • 通過 es-module-lexer 解析資源 ast 拿到 import 的內(nèi)容
  • 判斷 import 的資源是否是絕對路徑,絕對視為 npm 模塊
  • 返回處理后的資源路徑,例如:“vue” => “/@modules/vue”
  • 將處理的template,script,style等所需的依賴以http請求的形式,通過query參數(shù)形式區(qū)分并加載SFC文件各個模塊內(nèi)容。

為什么這里需要@modules?

舉個栗子:

import vue from ‘vue’

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

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

3.2文件請求

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

根據(jù)ctx.path確定請求具體的vue文件

使用parseSFC解析該文件,獲得descriptor,一個descriptor包含了這個組件的基本信息,包括template、script和styles等屬性 下面是Comp.vue文件經(jīng)過處理后獲得的descriptor

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

type為空時表示處理script標(biāo)簽,使用compileSFCMain方法返回js內(nèi)容

type為template時表示處理template標(biāo)簽,使用compileSFCTemplate方法返回render方法

type為styles時表示處理style標(biāo)簽,使用compileSFCStyle方法返回css文件內(nèi)容

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

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

4.hmr熱更新

vite的熱更新主要有四步:

  • 通過 watcher 監(jiān)聽文件改動;
  • 通過 server 端編譯資源,并推送新資源信息給 client ;
  • 需要框架支持組件 rerender/reload ;
  • client 收到資源信息,執(zhí)行框架 rerender 邏輯。

在client端,Websocket監(jiān)聽了一些更新的消息類型,然后分別處理:

  • vue-reload —— vue 組件更新:通過 import 導(dǎo)入新的 vue 組件,然后執(zhí)行 HMRRuntime.reload
  • vue-rerender —— vue template 更新:通過 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 —— 頁面 roload:使用 window.reload 刷新頁面

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

在這里插入圖片描述

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!   

相關(guān)文章

最新評論