詳解Vite的新體驗(yàn)
什么是Vite?(是前端新玩具)
Vite是一個(gè)web開(kāi)發(fā)構(gòu)建工具，它通過(guò)本機(jī) ES 模塊導(dǎo)入在開(kāi)發(fā)過(guò)程中更新代碼，達(dá)到快速更新的目的。
特點(diǎn)
- 超快的冷服務(wù)器啟動(dòng)
- 即時(shí)的模塊更新
- 真正的按需編譯
- 更小的打包體積
開(kāi)始使用
Vue用戶注意：Vite當(dāng)前僅適用于Vue3.x。這也意味著您不能使用尚未與Vue 3兼容的庫(kù)。
安裝
npm init vite-app <項(xiàng)目名稱> cd <項(xiàng)目名稱> npm install npm run dev ## 執(zhí)行完以上命令，就意味著你的vue3.0項(xiàng)目已經(jīng)用上了vite了
vite和webpack體驗(yàn)上有什么不同？
就vite目前給我的感覺(jué)，就是一個(gè)字，快。
- 初次啟動(dòng)調(diào)試服務(wù)的時(shí)候比webpack快了一倍。
- 打包的速度也快了一倍以上。
- 打包出來(lái)的文件的體積也是原來(lái)webpack的一半體積不到。
Vite是怎樣工作的？
用作者的話來(lái)說(shuō)，就是直接請(qǐng)求.vue文件，讓瀏覽器進(jìn)行解析
最新版的瀏覽器是支持直接使用import和export關(guān)鍵字了，也就是瀏覽器開(kāi)始原生支持模塊功能了，這也是Vite使用到的特性之一。
“說(shuō)了那么多，不如抓個(gè)包看看？”
當(dāng)然可以！在這里我只修改了HelloWorld.vue文件
然后我再次修改了App.vue文件 （不要在意時(shí)間戳不一樣，我只是不小心刪除了，然后又懶得重來(lái)）
到這里，相比對(duì)Webpack的Code Splitting實(shí)現(xiàn)按需加載的方式，Vite給我確實(shí)體驗(yàn)是快速了很多
最后
Vite雖然很爽，但是當(dāng)前RC 1版本僅適用于Vue3.x，不能使用和Vue3不兼容的庫(kù)。（速度肯定是比webpack快的，各方面）
到此這篇關(guān)于詳解Vite的新體驗(yàn)的文章就介紹到這了,更多相關(guān)Vite 新體驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)點(diǎn)擊復(fù)制到粘貼板
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊復(fù)制到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue spa應(yīng)用中的路由緩存問(wèn)題與解決方案
這篇文章主要介紹了vue spa應(yīng)用中的路由緩存問(wèn)題與解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue-router的鉤子函數(shù)用法實(shí)例分析
這篇文章主要介紹了vue-router的鉤子函數(shù)用法,結(jié)合實(shí)例形式分析了vue路由鉤子分類及vue-router鉤子函數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-10-10
vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端
這篇文章主要介紹了vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue頁(yè)面反復(fù)刷新的常見(jiàn)問(wèn)題及解決方案
Vue.js 是一個(gè)流行的前端框架,旨在通過(guò)其響應(yīng)式的數(shù)據(jù)綁定和組件化的開(kāi)發(fā)模式簡(jiǎn)化開(kāi)發(fā),然而,在開(kāi)發(fā) Vue.js 應(yīng)用時(shí),頁(yè)面反復(fù)刷新的問(wèn)題可能會(huì)對(duì)用戶體驗(yàn)和開(kāi)發(fā)效率產(chǎn)生負(fù)面影響,本文將深入探討 Vue 頁(yè)面反復(fù)刷新的常見(jiàn)原因,并提供詳細(xì)的解決方案2024-09-09
這篇文章主要介紹了在Vue 中使用Typescript的示例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
基于Vue實(shí)現(xiàn)頁(yè)面全屏封裝的詳細(xì)步驟
眾所周知：目前可視化大屏,視頻播放等常見(jiàn)功能都需要用到全屏,本文將使用兩種技術(shù)實(shí)現(xiàn)全屏功能的封裝,讓不同技術(shù)棧的同學(xué)都可以輕松掌握,好了,讓我們來(lái)實(shí)現(xiàn)一個(gè)既兼容性強(qiáng)又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08
解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問(wèn)題
這篇文章主要介紹了解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中有一個(gè)很神奇的東西叫v-model，它可以完成我們的需求。，本文重點(diǎn)給大家介紹vue中使用v-model完成組件間的通信,需要的朋友可以參考下2019-08-08