詳解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用戶(hù)注意：Vite當(dāng)前僅適用于Vue3.x。這也意味著您不能使用尚未與Vue 3兼容的庫(kù)。
安裝
npm init vite-app <項(xiàng)目名稱(chēng)> cd <項(xiàng)目名稱(chē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是怎樣工作的？
用作者的話(huà)來(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)文章
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁(yè)面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Axios?是一個(gè)基于?promise?的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和?node.js，是一個(gè)第三方插件，第三方異步請(qǐng)求工具庫(kù)，這篇文章主要介紹了Axios在vue項(xiàng)目中的封裝方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
解決vue中使用less/sass及使用中遇到無(wú)效的問(wèn)題
這篇文章主要介紹了解決vue中使用less/sass及使用中遇到無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Vue中import from@符號(hào)指的是什么意思
這篇文章主要介紹了Vue中import from@符號(hào)指的是意思,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue實(shí)現(xiàn)微信小程序中預(yù)覽文件的縮放功能
在微信小程序中,默認(rèn)情況下,文件預(yù)覽功能不支持文檔縮放,導(dǎo)致用戶(hù)在遇到小字體時(shí)難以清晰閱讀,為了解決這一問(wèn)題并提升用戶(hù)體驗(yàn),實(shí)現(xiàn)文檔的縮放功能至關(guān)重要,所以本文2024-12-12
vue動(dòng)態(tài)綁定class選中當(dāng)前列表變色的方法示例
這篇文章主要介紹了vue動(dòng)態(tài)綁定class選中當(dāng)前列表變色的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了vue+element控件之間間距太大問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題
這篇文章主要介紹了vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題,需要的朋友可以參考下2018-09-09