Vue3更高效的構建工具Vite使用指南

更新時間：2023年10月16日 09:35:08 作者：柒小莫

這篇文章主要給大家介紹了關于Vue3更高效的構建工具Vite使用的相關資料,Vite是一種面向現代瀏覽器的一個更輕、更快的前端構建工具,能夠顯著提升前端的開發(fā)體驗,需要的朋友可以參考下

前言

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

下面案例可供參考

一、Vite簡介

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

1. Vite組成

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

2.為什么選 Vite?

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

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

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

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

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

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

vite優(yōu)點

-unbundle 機制的核心:
模塊之間的依賴關系的解析由瀏覽器實現；
文件的轉換由 dev server 的 middlewares 實現并做緩存；
不對源文件做合并捆綁操作；

vite缺點

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

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