尤大發(fā)布vite也有段時間了， 看著vite發(fā)展如此迅猛， 我左思右想 決定還是蹭波熱度。在上一篇vue3嘗鮮中， 調(diào)試項目的過程有點繁瑣， 接下來咱們就一塊看看怎們用vite來學習vue3， 并分析一下 vite 他到底幫咱們干了些什么事。 都知道vite????， 那到底怎么????，哪里????呢？
先來看看尤大是怎么說的
快速冷啟動
瞬間熱更新
真正按需編譯
創(chuàng)建項目并運行
1 2 | $ yarn create vite-app myViteApp && cd myViteApp && yarn && yarn dev復制代碼 |
1 2 3 4 5 6 7 8 9 10 11 | |-- public|-- src| |-- assets| |-- components| |-- App.vue| |-- index.css| |-- main.js|-- .gitgnore|-- index.html|-- package.json 復制代碼 |
vite 幫我們生成的目錄結(jié)構(gòu)很簡潔，主要文件和 vue-cli 的文件都是一樣的
vite簡單、高效、強大， 在學習 vue3 的時候 就不用各種搭環(huán)境了
咱們先打開文件瞅瞅
index.html
src/main.js
index.html中引入了src/main.js， main.js 引入App.vue并掛在到html中，流程簡單的不行，打開瀏覽器組件也確實渲染出來了。
這一步的實現(xiàn) 離不開 Es 的 modules , 瀏覽器通過<script module>，為每個導入生成HTTP請求, vite的dev服務攔截http請求，并把代碼做一些轉(zhuǎn)換之后返回給瀏覽器進行渲染
簡單來說就是 Vite通過node編譯靜態(tài)資源 返回給瀏覽器渲染
源碼版本: v0.20.8
通常情況下，我們在瀏覽器輸入URL訪問一個網(wǎng)站，瀏覽器就會去服務器 請求對應的資源文件，這一點大家也都是知道的。所以在我們運行yarn dev之后，vite 啟動了一個dev server去攔截我們請求的資源文件，所以我們在瀏覽器看到的頁面實際上是經(jīng)過vite處理后的html文件
源碼：
1 2 3 4 5 6 | <script type="module">import "/vite/hmr" # 模塊熱更換window.__DEV__ = truewindow.process = { env: {"NODE_ENV":"development","BASE_URL":"/"}}</script>復制代碼 |
這里的import "/vite/hmr" ,瀏覽器又會去dev server請求hmr..., 實際就是返回了源碼中的client.ts文件
client文件地址/src/client/client.ts
這個client在瀏覽器中啟了一個socket服務，實時的去接受一系列的指令，根據(jù)指令 再去處理響應的邏輯
connected: socket 連接成功
vue-reload: 組件重新加載
vue-rerender: 組件重新渲染
style-update: 樣式更新
style-remove: 樣式移除
js-update: js 文件更新
full-reload: 網(wǎng)頁重刷新
源碼：
server端則負責在執(zhí)行的各個階段向客戶端發(fā)送指令
拿 vue-reload 舉例 源碼如下
vite的文件監(jiān)聽系統(tǒng)監(jiān)聽到.vue組件發(fā)生變化之后 就會去解析編譯vue組件，并向client發(fā)送一條vue-reload指令 并把編譯后的代碼也發(fā)送給client。小伙伴們在學習框架的時候，僅僅學會怎么用Api是遠遠不夠的，多去深入了解框架內(nèi)部的實現(xiàn)，會有不一樣的收獲。vite源碼閱讀起來相對來說不是很難，小伙伴們可以在github上把源碼下載下來試著去研究一下哦
對于vite的講解到這基本就結(jié)束了，感謝大家耐心觀看，文中如有錯誤歡迎指正。
聯(lián)系客服
