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