前言

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

下面案例可供參考

一、Vite簡介

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

1. Vite組成

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

2.為什么選 Vite?

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

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

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

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

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

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

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

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

vite缺點(diǎn)

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

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

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

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

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

• npm init vite-app 項目名稱
• cd 項目名稱
• npm install
• npm run dev

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

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

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

components 目錄用來存放項目中所有的自定義組件

App.vue 是項目的根組件

index.css 是項目的全局樣式表文件

main.js 是整個項目的打包入口文件

總結(jié)

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

最新評論