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

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

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

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

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

Vite是什么？

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

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

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

Vite的核心特性

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

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

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

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

使用Vite的好處

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

開源和獨立

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

快速的本地開發

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

廣泛的生態系統支持

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

這對每個人都是雙贏的。

易于擴展

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

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

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

開始使用Vite

對于像StackBlitz和Vite這樣的工具，理解它們為何不同最好的方式就是親自嘗試。Vite在StackBlitz中得到了全面支持[22]，這使得創建按需環境變得輕而易舉。Vite團隊使用StackBlitz來驅動其在線啟動器[23]。點擊你最喜歡的框架，編輯一些組件，看看Vite是如何工作的。

使用Vite開發

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

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

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

Vite的未來

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

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

Evan現在帶領一個新團隊開發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的全面修訂，面向框架作者。新的環境API[30]預計將在Vite v6中發布，它將成為自Vite 2發布以來Vite最大的變化之一。它將允許在任何數量的環境中通過Vite插件管道運行代碼，解鎖了對workers、RSC等的一級支持。

總結

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

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

今天就試試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]開發團隊: 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]環境API: https://github.com/vitejs/vite/discussions/16358

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

[32]Vite相關新聞: https://blog.stackblitz.com/tags/vite/