在現(xiàn)在的前端領(lǐng)域中，Vite 的人氣超級(jí)之高。

自2020年4月首次亮相以來，這個(gè)項(xiàng)目迅速獲得了極高的關(guān)注。到目前為止，它在 GitHub 上已累積超過 64k star，每周的下載量達(dá)到了1200萬次以上。它現(xiàn)已被廣泛應(yīng)用于多個(gè)開源框架，包括Nuxt、SvelteKit、Astro和SolidStart等。

什么是 Vite？

Vite，發(fā)音為/vit/，在法語中意為“快速”，這個(gè)名字確實(shí)很貼切。

Vite 是一款現(xiàn)代化的 JavaScript 構(gòu)建工具，它提供針對(duì)常見 Web 模式的開箱即用支持，優(yōu)化的構(gòu)建過程，以及與 rollup 的靈活性和成熟度結(jié)合。此外，它還整合了 esbuild 和原生 ES 模塊，實(shí)現(xiàn)了一個(gè)快速的無捆綁開發(fā)服務(wù)器。

這個(gè)工具是由 Vue.js 的創(chuàng)始人Evan You設(shè)計(jì)的，目的是簡(jiǎn)化捆綁過程，減少開發(fā)人員在啟動(dòng)開發(fā)服務(wù)器及文件編輯后重新加載時(shí)遇到的瓶頸問題。

Vite 核心特性

當(dāng)您使用 Vite 時(shí)，首先顯著的不同是開發(fā)服務(wù)器幾乎即刻啟動(dòng)。通過訪問vite.new，您可以立即查看其效果。這是因?yàn)?Vite 采取了一種按需服務(wù)的方法，它并不預(yù)先捆綁所有源代碼，而是根據(jù)瀏覽器的請(qǐng)求實(shí)時(shí)轉(zhuǎn)換您編寫的模塊為瀏覽器能夠理解的本地 ESM 模塊。Vite 支持TypeScript、PostCSS、CSS 預(yù)處理器、JSON 和 WASM等，還能通過一個(gè)不斷增長(zhǎng)的插件生態(tài)系統(tǒng)來擴(kuò)展支持您喜歡的框架和工具。

在開發(fā)過程中，每當(dāng)您更改項(xiàng)目中的文件時(shí)，Vite 利用應(yīng)用程序的模塊圖僅對(duì)受影響的模塊進(jìn)行熱重新加載（HMR），允許開發(fā)者實(shí)時(shí)預(yù)覽他們的更改及其對(duì)應(yīng)用程序的影響。Vite 的 HMR 速度極快，它支持編輯器的自動(dòng)保存功能，使得開發(fā)體驗(yàn)與在瀏覽器開發(fā)工具中修改 CSS 類似

此外，Vite 在開發(fā)階段還會(huì)執(zhí)行依賴預(yù)引用，使用esbuild來引用和緩存您的依賴項(xiàng)，這有助于加速未來服務(wù)器啟動(dòng)和依賴項(xiàng)加載速度。特別是對(duì)于導(dǎo)出許多小模塊的依賴項(xiàng)（如 lodash），這種方式可以顯著提升加載效率，因?yàn)闉g覽器只需加載少數(shù)幾個(gè)模塊塊。它還支持在依賴項(xiàng)中包含CommonJS和UMD代碼，因?yàn)檫@些代碼會(huì)被轉(zhuǎn)換為本地 ESM 模塊。

當(dāng)您準(zhǔn)備將應(yīng)用程序部署時(shí)，Vite 利用優(yōu)化的 Rollup 設(shè)置進(jìn)行構(gòu)建。它實(shí)施 CSS 代碼分割，添加預(yù)加載指令，并優(yōu)化異步塊的加載，一切無需手動(dòng)配置。Vite 的 rollup 兼容插件 API 適用于開發(fā)和生產(chǎn)環(huán)境，便于您擴(kuò)展和定制構(gòu)建流程。

使用 Vite 的好處

使用 Vite 有幾個(gè)主要好處。以下是我們最喜歡的一些：

開源且獨(dú)立

Vite 是一個(gè)由開源開發(fā)者社區(qū)共同開發(fā)的獨(dú)立項(xiàng)目，受到來自各種背景的開發(fā)者團(tuán)隊(duì)的領(lǐng)導(dǎo)。它的核心倉(cāng)庫已經(jīng)收到了超過900名貢獻(xiàn)者的貢獻(xiàn)，這表明它得到了積極的開發(fā)和維護(hù)。這種持續(xù)的貢獻(xiàn)反映了多樣化的產(chǎn)品需求，并且功能集也在不斷地?cái)U(kuò)展和更新。

本地開發(fā)就是快

Vite 的核心優(yōu)勢(shì)之一是它的開發(fā)體驗(yàn)（DX），它能確保即便是應(yīng)用程序規(guī)模增大，開發(fā)者仍能享受到快速的保存和重新加載體驗(yàn)。這種高效的反饋循環(huán)使得開發(fā)者可以持續(xù)高效地工作，無需擔(dān)心性能下降。

良好的生態(tài)系統(tǒng)支持。

Vite 同時(shí)也享受著廣泛的生態(tài)系統(tǒng)支持。由于其受歡迎程度，許多框架和工具都選擇默認(rèn)支持 Vite 或提供一流的兼容性。這使得這些項(xiàng)目的維護(hù)者可以基于一個(gè)共同的平臺(tái)共享和改進(jìn)工具，減少了重復(fù)工作，讓他們能專注于開發(fā)用戶所需的功能。

易于擴(kuò)展

Vite 的擴(kuò)展性也表現(xiàn)出色，得益于其對(duì)Rollup插件 API 的有效利用。這個(gè)插件系統(tǒng)允許開發(fā)者利用 Vite 核心的功能，并且社區(qū)中已經(jīng)有許多高質(zhì)量的插件可供使用，例如vite-plugin-pwa和vite-imagetools。

構(gòu)建的神器

作為現(xiàn)代開發(fā)生態(tài)系統(tǒng)的重要組成部分，Vite 與其他工具如Volar、Nitro和Dev Toolkit一道，形成了一個(gè)強(qiáng)大的框架和工具集合。Volar 為特定編程語言如 Vue、MDX 和 Astro 提供高性能的編輯體驗(yàn)，Nitro 則是一個(gè)獨(dú)立的服務(wù)器工具包，它支持各大主要部署平臺(tái)。這些工具共同構(gòu)成了一個(gè)通用的框架開發(fā)基礎(chǔ)，為開發(fā)者提供了一個(gè)堅(jiān)實(shí)的支持平臺(tái)，幫助他們構(gòu)建更加復(fù)雜和功能豐富的應(yīng)用。

Vite 的未來

在最近的 ViteConf 上，Evan 提到，盡管 Vite 取得了顯著的成就，但項(xiàng)目仍存在一些挑戰(zhàn)和問題。他詳細(xì)討論了 Vite 目前依賴 Rollup 來進(jìn)行生產(chǎn)級(jí)構(gòu)建的情況，并指出相比于如 esbuild 或 Bun 這樣的本地打包工具，Rollup 的速度較慢。此外，盡管 Vite 努力縮小開發(fā)環(huán)境與生產(chǎn)環(huán)境間的差異，但由于 Rollup 和 esbuild 之間的性能差異，某些不一致性還是難以避免

Evan 現(xiàn)領(lǐng)導(dǎo)的新團(tuán)隊(duì)正在開發(fā)一種名為 Rolldown 的工具，這是一個(gè)基于 Rust 的 Rollup 替代品，建立在名為 OXC（JavaScript 氧化編譯器）的平臺(tái)上，目的是整合 Rollup 的靈活性和 esbuild 的高速性能。Rolldown 的設(shè)計(jì)目標(biāo)是替代 Vite 中的 Rollup 和 esbuild，以此來提供統(tǒng)一的基礎(chǔ)，減少不一致性，簡(jiǎn)化代碼的維護(hù)，并加速構(gòu)建過程。雖然 Rolldown 還在初期階段，但已經(jīng)展現(xiàn)出了潛力，并且該項(xiàng)目已經(jīng)開源。Rolldown 團(tuán)隊(duì)正在積極尋找感興趣的開發(fā)者加入他們的 GitHub 倉(cāng)庫和 Discord 社區(qū)來共同推動(dòng)這一項(xiàng)目

同時(shí)，Vite 團(tuán)隊(duì)也在不斷優(yōu)化和改進(jìn) Vite，這些改進(jìn)從 vite-node（為 Vitest 和 Nuxt Dev SSR 提供動(dòng)力的引擎）開始，并已經(jīng)擴(kuò)展到對(duì) Vite API 的全面審查。預(yù)計(jì)在即將到來的 Vite v6 中將引入一個(gè)新的環(huán)境 API，這是自 Vite 2 發(fā)布以來的一次重大更新。這將允許開發(fā)者在多種環(huán)境中運(yùn)行代碼，通過 Vite 插件管道實(shí)現(xiàn)，從而為 workerd、RSC 等提供更好的支持