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

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

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

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

在這篇文章中，我們將為你提供一個關于Vite的入門指南，以及它是如何在短短幾年內成長為現代Web的中堅力量。

Vite是什么？

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

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

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

Vite的核心特性

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

在開發(fā)過程中，每當你在項目中更改任何文件時，Vite都會使用應用程序的模塊圖只熱重載受影響的模塊（HMR）。這允許開發(fā)者預覽他們的更改以及這些更改對應用程序的影響。Vite HMR的速度非?？?，以至于可以允許編輯器自動保存，獲得類似于在瀏覽器開發(fā)工具中修改CSS時的反饋循環(huán)。

Vite還執(zhí)行依賴預打包。在開發(fā)過程中，它使用esbuild捆綁你的依賴項并將它們緩存起來，以加快未來的服務器啟動速度。這個優(yōu)化步驟還有助于加快加載時間，特別是對于導出許多小模塊的依賴項（如lodash），因為瀏覽器每個依賴項只加載幾個塊而不是多個。它還允許Vite支持CommonJS和UMD代碼中的依賴項，因為它們被捆綁成原生ESM模塊。

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

使用Vite的好處

使用Vite有幾個關鍵好處[14]。以下是我們最喜歡的一些：

開源和獨立

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

快速的本地開發(fā)

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

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

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

這對每個人都是雙贏的。

易于擴展

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

框架構建難題中的重要一塊

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

開始使用Vite

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

使用Vite開發(fā)

在使用Vite開發(fā)時，你可以運行三個命令。

• vite dev 啟動Vite開發(fā)服務器（當你在StackBlitz中打開Vite項目時，它會自動為你啟動）
• vite build 準備生產構建
• vite preview 允許你預覽你構建的網站或應用程序

確保在運行vite preview之前運行vite build，以查看你的更改。

Vite的未來

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

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

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

Rolldown目前還處于早期階段，但已經顯示出了有希望的結果。該項目現在已開源，Rolldown團隊正在尋找貢獻者來幫助實現這一愿景。

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

總結

Vite正在開辟一條前進的道路，并且正在迅速成為JavaScript生態(tài)系統(tǒng)中的標準構建工具。

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

今天就試試https://vite.new[31]，并關注更多Vite相關新聞[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]關鍵好處: https://vitejs.dev/guide/why.html

[15]開發(fā)團隊: 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]在線啟動器: 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相關新聞: https://blog.stackblitz.com/tags/vite/