前言

本文講解了構(gòu)建工具 Vite，目前只有vue3才可以使用Vite，如果本文對(duì)你有所幫助請(qǐng)三連支持博主。

下面案例可供參考

一、Vite簡(jiǎn)介

Vite 是一種面向現(xiàn)代瀏覽器的一個(gè)更輕、更快的前端構(gòu)建工具，能夠顯著提升前端的開(kāi)發(fā)體驗(yàn)。除了Vite外，前端著名的構(gòu)建工具還有Webpack和Gulp。目前，Vite已經(jīng)發(fā)布了Vite2，Vite全新的插件架構(gòu)、絲滑的開(kāi)發(fā)體驗(yàn)，可以和Vue3的完美結(jié)合。

1. Vite組成

一個(gè)開(kāi)發(fā)服務(wù)器，它基于原生 ES 模塊提供了豐富的內(nèi)建功能，如模塊熱更新（HMR）。一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可以輸出用于生產(chǎn)環(huán)境的優(yōu)化過(guò)的靜態(tài)資源?？偟膩?lái)說(shuō)，Vite希望提供開(kāi)箱即用的配置，同時(shí)它的插件API和JavaScript API帶來(lái)了高度的可擴(kuò)展性。不過(guò)，相比Vue-cli配置來(lái)說(shuō)，Vite構(gòu)建的項(xiàng)目還是有很多的配置需要開(kāi)發(fā)者自己進(jìn)行處理。

2.為什么選 Vite?

時(shí)過(guò)境遷，我們見(jiàn)證了諸如 webpack、Rollup 和 Parcel 等工具的變遷，它們極大地改善了前端開(kāi)發(fā)者的開(kāi)發(fā)體驗(yàn)。

然而，當(dāng)我們開(kāi)始構(gòu)建越來(lái)越大型的應(yīng)用時(shí)，需要處理的 JavaScript 代碼量也呈指數(shù)級(jí)增長(zhǎng)。包含數(shù)千個(gè)模塊的大型項(xiàng)目相當(dāng)普遍?；?JavaScript 開(kāi)發(fā)的工具就會(huì)開(kāi)始遇到性能瓶頸：通常需要很長(zhǎng)時(shí)間（甚至是幾分鐘！）才能啟動(dòng)開(kāi)發(fā)服務(wù)器，即使使用模塊熱替換（HMR），文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來(lái)。如此循環(huán)往復(fù)，遲鈍的反饋會(huì)極大地影響開(kāi)發(fā)者的開(kāi)發(fā)效率和幸福感。

Vite 旨在利用生態(tài)系統(tǒng)中的新進(jìn)展解決上述問(wèn)題：瀏覽器開(kāi)始原生支持 ES 模塊，且越來(lái)越多 JavaScript 工具使用編譯型語(yǔ)言編寫。

二、Vite的優(yōu)缺點(diǎn)

Vite 的快，主要體現(xiàn)在兩個(gè)方面: 快速的冷啟動(dòng)和快速的熱更新。而 Vite 之所以能有如此優(yōu)秀的表現(xiàn)，完全歸功于 Vite 借助了瀏覽器對(duì) ESM 規(guī)范的支持，采取了與 Webpack 完全不同的 unbundle 機(jī)制。

1. 快速冷啟動(dòng)：Vite只啟動(dòng)一臺(tái)靜態(tài)頁(yè)面的服務(wù)器，不會(huì)打包全部項(xiàng)目文件代碼，服務(wù)器根據(jù)客戶端的請(qǐng)求加載不同的模塊處理，實(shí)現(xiàn)按需加載，而我們所熟知的webpack則是，一開(kāi)始就將整個(gè)項(xiàng)目都打包一遍，再開(kāi)啟dev-server，如果項(xiàng)目規(guī)模龐大，打包時(shí)間必然很長(zhǎng)。
2. 打包編譯速度：當(dāng)需要打包到?產(chǎn)環(huán)境時(shí)，vite使?傳統(tǒng)的rollup進(jìn)?打包，所以，vite的優(yōu)勢(shì)是體現(xiàn)在開(kāi)發(fā)階段，另外，由于vite使?的是ES Module，所以代碼中不可以使?CommonJs；
3. 熱模塊更新：在HRM熱更新??，當(dāng)某個(gè)模塊內(nèi)容改變時(shí)，讓瀏覽器去重新請(qǐng)求該模塊即可，?不是像webpack重新將該模塊的所有依賴重新編譯；

vite優(yōu)點(diǎn)

• -unbundle 機(jī)制的核心:
• 模塊之間的依賴關(guān)系的解析由瀏覽器實(shí)現(xiàn)；
• 文件的轉(zhuǎn)換由 dev server 的 middlewares 實(shí)現(xiàn)并做緩存；
• 不對(duì)源文件做合并捆綁操作；

vite缺點(diǎn)

由于 unbundle 機(jī)制，首屏期間、懶加載方面需要額外做以下工作:和 Webpack 對(duì)比，Vite 把需要在 dev server 啟動(dòng)過(guò)程中完成的工作，轉(zhuǎn)移到了 dev server 響應(yīng)瀏覽器請(qǐng)求的過(guò)程中，不可避免的導(dǎo)致首屏性能下降。不過(guò)首屏性能差只發(fā)生在 dev server 啟動(dòng)以后第一次加載頁(yè)面時(shí)發(fā)生。之后再 reload 頁(yè)面時(shí)，首屏性能會(huì)好很多。原因是 dev server 會(huì)將之前已經(jīng)完成轉(zhuǎn)換的內(nèi)容緩存起來(lái)。

不對(duì)源文件做合并捆綁操作，導(dǎo)致大量的 http 請(qǐng)求；dev server 運(yùn)行期間對(duì)源文件做 resolve、load、transform、parse 操作；預(yù)構(gòu)建、二次預(yù)構(gòu)建操作也會(huì)阻塞首屏請(qǐng)求，直到預(yù)構(gòu)建完成為止。

三、使用Vite創(chuàng)建Vue3項(xiàng)目

1. 創(chuàng)建 vite 的項(xiàng)目

按照順序執(zhí)行如下的命令，即可基于vite 創(chuàng)建vue 3.x 的工程化項(xiàng)目：

• npm init vite-app 項(xiàng)目名稱
• cd 項(xiàng)目名稱
• npm install
• npm run dev

2.項(xiàng)目的結(jié)構(gòu)

• node_modules 目錄用來(lái)存放第三方依賴包
• public 是公共的靜態(tài)資源目錄
• src 是項(xiàng)目的源代碼目錄（程序員寫的所有代碼都要放在此目錄下）
• .gitignore 是 Git 的忽略文件
• index.html 是 SPA 單頁(yè)面應(yīng)用程序中唯一的HTML 頁(yè)面
• package.json 是項(xiàng)目的包管理配置文件

assets 目錄用來(lái)存放項(xiàng)目中所有的靜態(tài)資源文件（css、fonts等）

components 目錄用來(lái)存放項(xiàng)目中所有的自定義組件

App.vue 是項(xiàng)目的根組件

index.css 是項(xiàng)目的全局樣式表文件

main.js 是整個(gè)項(xiàng)目的打包入口文件

總結(jié)

到此這篇關(guān)于Vue3更高效的構(gòu)建工具Vite使用的文章就介紹到這了,更多相關(guān)Vue3構(gòu)建工具Vite內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論