在Web開發(fā)的大千世界里，想要不聽到關(guān)于Vite[1]的討論，那可真是難上加難。

自2020年4月發(fā)布以來，Vite的人氣就像坐了火箭一樣直線上升。截至寫這篇文章的時(shí)候，這個(gè)項(xiàng)目在GitHub上已經(jīng)獲得了超過64k的star，并且在每周的npm下載量上超過了1200萬，現(xiàn)在它支持著大多數(shù)開源框架，比如Nuxt[2]、SvelteKit[3]、Astro[4]、SolidStart[5]和Remix[6]（這只是冰山一角）。

如果你想了解Vite的歷史，推薦你觀看Evan You在ViteConf 2022上的主旨演講[7]。

盡管Vite聲名鵲起，但我們意識(shí)到許多開發(fā)者可能仍然不熟悉Vite是什么，或者它在推動(dòng)現(xiàn)代Web框架和工具開發(fā)中扮演的關(guān)鍵角色。

在這篇文章中，我們將為你提供一個(gè)關(guān)于Vite的入門指南，以及它是如何在短短幾年內(nèi)成長為現(xiàn)代Web的中堅(jiān)力量。

Vite是什么？

Vite的發(fā)音是/vit/，在法語中意味著“快速”或“迅速”，而且Vite絕對(duì)不負(fù)其名。

簡單來說，Vite[8]是一個(gè)現(xiàn)代JavaScript構(gòu)建工具，它為常見的Web模式提供了開箱即用的支持，提供了優(yōu)化的構(gòu)建，結(jié)合了rollup[9]的靈活性和成熟度，以及由esbuild[10]實(shí)現(xiàn)的快速無捆綁開發(fā)服務(wù)器和原生ES模塊。

Vite由Vue.js[11]的創(chuàng)造者Evan You[12]構(gòu)思，目的是通過減少開發(fā)者在啟動(dòng)開發(fā)服務(wù)器和文件編輯后處理重新加載時(shí)遇到的瓶頸來簡化打包過程。

Vite的核心特性

當(dāng)你運(yùn)行Vite時(shí)，你會(huì)注意到的第一個(gè)不同是開發(fā)服務(wù)器幾乎是瞬間啟動(dòng)的。你可以訪問vite.new[13]并親眼見證。這是因?yàn)閂ite采用了按需服務(wù)的方式來將你的應(yīng)用程序提供給瀏覽器。Vite不是首先打包整個(gè)源代碼，而是根據(jù)瀏覽器的請(qǐng)求，實(shí)時(shí)將你編寫的模塊轉(zhuǎn)換為瀏覽器能夠理解的原生ESM模塊。Vite開箱即支持TypeScript、PostCSS、CSS預(yù)處理器、JSON、WASM等，并且可以通過不斷增長的插件生態(tài)系統(tǒng)擴(kuò)展來支持你所有喜愛的框架和工具。

在開發(fā)過程中，每當(dāng)你在項(xiàng)目中更改任何文件時(shí)，Vite都會(huì)使用應(yīng)用程序的模塊圖只熱重載受影響的模塊（HMR）。這允許開發(fā)者預(yù)覽他們的更改以及這些更改對(duì)應(yīng)用程序的影響。Vite HMR的速度非?？欤灾劣诳梢栽试S編輯器自動(dòng)保存，獲得類似于在瀏覽器開發(fā)工具中修改CSS時(shí)的反饋循環(huán)。

Vite還執(zhí)行依賴預(yù)打包。在開發(fā)過程中，它使用esbuild捆綁你的依賴項(xiàng)并將它們緩存起來，以加快未來的服務(wù)器啟動(dòng)速度。這個(gè)優(yōu)化步驟還有助于加快加載時(shí)間，特別是對(duì)于導(dǎo)出許多小模塊的依賴項(xiàng)（如lodash），因?yàn)闉g覽器每個(gè)依賴項(xiàng)只加載幾個(gè)塊而不是多個(gè)。它還允許Vite支持CommonJS和UMD代碼中的依賴項(xiàng)，因?yàn)樗鼈儽焕壋稍鶨SM模塊。

當(dāng)你準(zhǔn)備部署時(shí)，Vite將使用優(yōu)化的Rollup設(shè)置構(gòu)建你的應(yīng)用程序。它執(zhí)行CSS代碼拆分，添加預(yù)加載指令，并優(yōu)化異步塊的加載，無需任何配置。Vite提供了一個(gè)通用的與Rollup兼容的插件API，適用于開發(fā)和生產(chǎn)，使其更容易擴(kuò)展和自定義你的構(gòu)建過程。

使用Vite的好處

使用Vite有幾個(gè)關(guān)鍵好處[14]。以下是我們最喜歡的一些：

開源和獨(dú)立

Vite是由一群開源開發(fā)者開發(fā)的，由來自不同背景的開發(fā)團(tuán)隊(duì)[15]帶頭。Vite核心倉庫最近已經(jīng)超過900個(gè)貢獻(xiàn)者。它正在積極開發(fā)和維護(hù)，新功能不斷實(shí)現(xiàn)，漏洞也在穩(wěn)定地得到修復(fù)。這也意味著不斷發(fā)展的功能集反映了大量多樣化產(chǎn)品的真實(shí)應(yīng)用需求的交叉部分。

快速的本地開發(fā)

開發(fā)體驗(yàn)（DX）是Vite的核心，每次保存時(shí)你都能感受到它。我們常常認(rèn)為重新加載的速度是理所當(dāng)然的。但隨著你的應(yīng)用程序增長，重新加載速度逐漸變慢，你會(huì)感激Vite保持（幾乎）即時(shí)重新加載的能力，無論應(yīng)用程序大小如何。

廣泛的生態(tài)系統(tǒng)支持

Vite的方法受到了非常好的接受，大多數(shù)框架和工具默認(rèn)使用Vite或提供一流的支持。通過選擇Vite作為構(gòu)建工具，這些項(xiàng)目的維護(hù)者可以在它們之間共享一個(gè)共同的基礎(chǔ)，并隨著時(shí)間的推移共同改進(jìn)它。因此，他們可以花更多的時(shí)間開發(fā)用戶需要的功能，而不是重新發(fā)明輪子。

這對(duì)每個(gè)人都是雙贏的。

易于擴(kuò)展

Vite對(duì)Rollup插件API的賭注得到了回報(bào)。插件允許下游項(xiàng)目共享Vite核心提供的功能。有許多高質(zhì)量的插件可供使用，如vite-plugin-pwa[16]和vite-imagetools[17]。

框架構(gòu)建難題中的重要一塊

Vite是現(xiàn)代元框架正在構(gòu)建的大塊之一。它是正在采取類似路徑的更大工具生態(tài)系統(tǒng)的一部分。Volar[18]是StackBlitz團(tuán)隊(duì)自豪支持的另一個(gè)工具。它為自定義編程語言（如Vue、MDX和Astro）提供了在代碼編輯器中構(gòu)建堅(jiān)實(shí)且高效編輯體驗(yàn)所需的工具。它允許框架為其用戶提供懸停信息、診斷和自動(dòng)補(bǔ)全等功能，共享Volar作為共同基礎(chǔ)來為它們提供動(dòng)力。另一個(gè)絕佳的例子是Nitro[19]，一個(gè)服務(wù)器工具包，用于創(chuàng)建支持每個(gè)主要部署平臺(tái)的全功能Web服務(wù)器。它是一系列框架無關(guān)的庫UnJS[20]的一部分。還有Dev Toolkit[21]，這是一個(gè)新的努力，旨在為框架開發(fā)工具共享一個(gè)共同的基礎(chǔ)。

開始使用Vite

對(duì)于像StackBlitz和Vite這樣的工具，理解它們?yōu)楹尾煌詈玫姆绞骄褪怯H自嘗試。Vite在StackBlitz中得到了全面支持[22]，這使得創(chuàng)建按需環(huán)境變得輕而易舉。Vite團(tuán)隊(duì)使用StackBlitz來驅(qū)動(dòng)其在線啟動(dòng)器[23]。點(diǎn)擊你最喜歡的框架，編輯一些組件，看看Vite是如何工作的。

使用Vite開發(fā)

在使用Vite開發(fā)時(shí)，你可以運(yùn)行三個(gè)命令。

• vite dev 啟動(dòng)Vite開發(fā)服務(wù)器（當(dāng)你在StackBlitz中打開Vite項(xiàng)目時(shí)，它會(huì)自動(dòng)為你啟動(dòng)）
• vite build 準(zhǔn)備生產(chǎn)構(gòu)建
• vite preview 允許你預(yù)覽你構(gòu)建的網(wǎng)站或應(yīng)用程序

確保在運(yùn)行vite preview之前運(yùn)行vite build，以查看你的更改。

Vite的未來

在最近的ViteConf主題演講[24]中，Evan分享了盡管Vite正在取得巨大進(jìn)步，但項(xiàng)目仍面臨一些已知的問題和挑戰(zhàn)。

正如我們之前討論的，Vite目前使用Rollup進(jìn)行生產(chǎn)構(gòu)建。這并不像esbuild或Bun這樣的原生打包器那樣快。Vite還盡可能地減少了開發(fā)環(huán)境和生產(chǎn)環(huán)境之間的不一致性，但由于Rollup和esbuild之間的差異，一些不一致性是不可避免的。

Evan現(xiàn)在帶領(lǐng)一個(gè)新團(tuán)隊(duì)開發(fā)Rolldown[25]，這是一款基于Rust的Rollup端口，建立在OXC[26]（JavaScript氧化編譯器）之上，力求與Rollup兼容。這個(gè)想法是用Rolldown替換Vite中的Rollup和esbuild。Vite將擁有一個(gè)單一的基礎(chǔ)，結(jié)合了Rollup的靈活性和esbuild的速度，消除了不一致性，使代碼庫更易于維護(hù)，并加快了構(gòu)建時(shí)間。

Rolldown目前還處于早期階段，但已經(jīng)顯示出了有希望的結(jié)果。該項(xiàng)目現(xiàn)在已開源，Rolldown團(tuán)隊(duì)正在尋找貢獻(xiàn)者來幫助實(shí)現(xiàn)這一愿景。

與此同時(shí)，Vite團(tuán)隊(duì)在每個(gè)版本中都在不斷改進(jìn)Vite。由Vitest[27]和Nuxt Dev SSR[28]驅(qū)動(dòng)的引擎vite-node[29]的工作已經(jīng)開始，演變成Vite API的全面修訂，面向框架作者。新的環(huán)境API[30]預(yù)計(jì)將在Vite v6中發(fā)布，它將成為自Vite 2發(fā)布以來Vite最大的變化之一。它將允許在任何數(shù)量的環(huán)境中通過Vite插件管道運(yùn)行代碼，解鎖了對(duì)workers、RSC等的一級(jí)支持。

總結(jié)

Vite正在開辟一條前進(jìn)的道路，并且正在迅速成為JavaScript生態(tài)系統(tǒng)中的標(biāo)準(zhǔn)構(gòu)建工具。

StackBlitz很自豪能夠成為Vite的支持者，我們期待看到2024年項(xiàng)目如何發(fā)展！

今天就試試https://vite.new[31]，并關(guān)注更多Vite相關(guān)新聞[32]。

本文譯自：https://blog.stackblitz.com/posts/what-is-vite-introduction/

Reference

[1]Vite: https://vitejs.dev/

[2]Nuxt: https://nuxt.com/

[3]SvelteKit: https://kit.svelte.dev/

[4]Astro: https://astro.build/

[5]SolidStart: https://start.solidjs.com/

[6]Remix: https://remix.run/

[7]Evan You在ViteConf 2022上的主旨演講: https://viteconf.org/23/replay/vite_keynote

[8]Vite: https://vitejs.dev/guide/

[9]rollup: https://rollupjs.org/

[10]esbuild: https://esbuild.github.io/

[11]Vue.js: https://vuejs.org/

[12]Evan You: https://twitter.com/youyuxi

[13]vite.new: https://vite.new/

[14]關(guān)鍵好處: https://vitejs.dev/guide/why.html

[15]開發(fā)團(tuán)隊(duì): https://vitejs.dev/team

[16]vite-plugin-pwa: https://vite-pwa-org.netlify.app/

[17]vite-imagetools: https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite

[18]Volar: https://volarjs.dev/

[19]Nitro: https://nitro.unjs.io/

[20]UnJS: https://unjs.io/

[21]Dev Toolkit: https://www.youtube.com/watch?v=E6kTiIbU3N8

[22]全面支持: https://blog.stackblitz.com/posts/vite-new-templates/

[23]在線啟動(dòng)器: https://vitejs.dev/guide/#trying-vite-online

[24]最近的ViteConf主題演講: https://viteconf.org/23/replay/vite_keynote

[25]Rolldown: https://chat.rolldown.rs/

[26]OXC: https://oxc-project.github.io/

[27]Vitest: https://vitest.dev/

[28]Nuxt Dev SSR: https://antfu.me/posts/dev-ssr-on-nuxt

[29]vite-node: https://github.com/vitest-dev/vitest/tree/main/packages/vite-node#readme

[30]環(huán)境API: https://github.com/vitejs/vite/discussions/16358

[31]https://vite.new: https://vite.new/

[32]Vite相關(guān)新聞: https://blog.stackblitz.com/tags/vite/