狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

00. 觀前須知

在 Web 開發領域，Vite 如今已如雷貫耳。

自 2020 年 4 月發布以來，Vite 的人氣蒸蒸日上。目前 Vite 在 GitHub 上的收藏數量已超過 64k，每周下載量超過 1200 萬次，現在為 Nuxt、Remix、Astro 等大多數開源框架提供支持。

盡管眾口囂囂，我們意識到許多開發者可能仍然不熟悉 Vite 是什么鬼物，也不熟悉 Vite 在推動現代 Web 框架和工具的開發中扮演的重要角色。

在本文中，我們將科普 Vite 的知識儲備，以及 Vite 如何在短短幾年后發展成為現代 Web 的重量級角色。

01. Vite 是什么鬼物？

Vite 的發音為 /vit/，在法語中是“快速”或“迅捷”的意思，不得不說 Vite 名副其實。

簡而言之，Vite 是一種現代 JS 構建工具，為常見 Web 模式提供開箱即用的支持和構建優化，兼具 rollup 的自由度和成熟度。

Vite 還與 esbuild 和原生 ES 模塊強強聯手，實現快速無打包開發服務器。

Vite 是由“Vue 之父”尤雨溪（Evan You）構思出來的，旨在通過減少開發者在啟動開發服務器和處理文件編輯后重載時遭遇的性能瓶頸，簡化打包過程。

02. Vite 的核心特性

運行 Vite 時，你會注意到的第一個區別在于，開發服務器會即時啟動。

這是因為，Vite 采用按需方法將你的應用程序提供給瀏覽器。Vite 不會首先打包整個源碼，而是響應瀏覽器請求，將你編寫的模塊即時轉換為瀏覽器可以理解的原生 ESM 模塊。

Vite 為 TS、PostCSS、CSS 預處理器等提供開箱即用的支持，且可以通過不斷增長的插件生態系統進行擴展，支持所有你喜歡的框架和工具。

每當你在開發期間更改項目中的任意文件時，Vite 都會使用應用程序的模塊圖，只熱重載受影響的模塊（HMR）。這允許開發者預覽他們的更改，及其對應用程序的影響。

Vite 的 HMR 速度驚人，可以讓編輯器自動保存，并獲得類似于在瀏覽器開發工具中修改 CSS 時的反饋循環。

Vite 還執行 依賴預構建（dependency pre-bundling）。在開發過程中，Vite 使用 esbuild 來打包你的依賴并緩存，加快未來服務器的啟動速度。

此優化步驟還有助于加快 lodash 等導出許多迷你模塊的依賴的加載時間，因為瀏覽器只加載每個依賴的代碼塊（chunk）。這還允許 Vite 在依賴中支持 CJS 和 UMD 代碼，因為它們被打包到原生 ESM 模塊中。

當你準備好部署時，Vite 將使用優化的 rollup 設置來構建你的應用程序。Vite 會執行 CSS 代碼分割，添加預加載指令，并優化異步塊的加載，無需任何配置。

Vite 提供了一個通用的 rollup 兼容插件 API，適用于開發和生產，使你可以更輕松地擴展和自定義構建過程。

03. Vite 的優勢

使用 Vite 有若干主要優勢，包括但不限于：

03-1. 開源且獨立

Vite 由開源開發者社區“用愛發電”，由來自不同背景的開發者團隊領導，Vite 核心倉庫最近貢獻者數量已突破 900 人。

Vite 得到積極的開發和維護，不斷實現新功能并解決錯誤。

03-2. 本地敏捷開發

開發體驗是 Vite 的核心，每次點擊保存時，你都能感受到延遲。我們常常認為重載速度是理所當然的。

但隨著您的應用程序增長，且重載速度逐漸停止，你將感恩 Vite 幾乎能夠保持瞬間重載，而無論應用程序大小如何。

03-3. 廣泛的生態系統支持

Vite 的方案人氣爆棚，大多數框架和工具都默認使用 Vite 或擁有一流的支持。通過選擇使用 Vite 作為構建工具，這些項目維護者可以在它們之間共享一個統一基建，且隨著時間的推移共同改良 Vite。

因此，它們可以花更多的時間開發用戶需要的功能，而減少重新造輪子的時間。

03-4. 易于擴展

Vite 對 rollup 插件 API 的押注得到了回報。插件允許下游項目共享 Vite 核心提供的功能。

我們有很多高質量的插件可供使用，例如 vite-plugin-pwa 和 vite-imagetools。

03-5. 框架構建難題中的重要角色

Vite 是現代元框架構建的重要組成部分之一，這是一個更大的工具生態系統的一部分。

Volar 提供了在代碼編輯器中為 Vue、MDX 和 Astro 等自定義編程語言構建可靠且高性能的編輯體驗所需的工具。Volar 允許框架向用戶提供懸停信息、診斷和自動補全等功能，并共享 Volar 作為為它們提供支持的通用基建。

另一個很好的例子是 Nitro，它是一個服務器工具包，用于創建功能齊全的 Web 服務器，開箱即用地支持每個主要部署平臺。Nitro 是一個與框架無關的庫 UnJS 的奇妙集合的一部分。

04. Vite 的未來

在最近的 ViteConf 大會的演講中，尤雨溪表示，雖然 Vite 取得了巨大進展，但仍面臨一些已知的問題和挑戰。

Vite 目前使用 rollup 進行生產構建，這比 esbuild 或 Bun 等原生打包器慢得多。

Vite 還盡可能減少開發和生產環境之間的不一致性，但考慮到 rollup 和 esbuild 之間的差異，某些不一致性無法避免。

尤雨溪現在領導一個新團隊開發 rolldown，這是一個基于 Rust 的 rollup 移植，在 “JS 氧化編譯器 OXC”之上構建了最大的兼容性。

這個主意是用 rolldown 替代 Vite 中的 rollup 和 esbuild。Vite 將擁有一個單獨基建，兼具 rollup 的自由度和 esbuild 的速度，消除不一致性，使代碼庫更易于維護，并加快構建時間。

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

與此同時，Vite 團隊在每個版本中不斷改良 Vite。這項工作從上游的為 Vitest 和 Nuxt Dev SSR 提供動力的引擎 vite-node 開始，現已發展成為框架作者對 Vite API 的完整修訂版。

新版 Environment API 預計在 Vite 6 中發布，這將是自 Vite 2 發布以來 Vite 最大的變化之一。這將允許在任意數量的環境中通過 Vite 插件管道運行代碼，解鎖對 worker、RSC 等的一流支持。

Vite 正在開辟一條前進的道路，并迅速成為 JS 生態系統事實上的構建工具。

參考文獻

1. Vite：https://vitejs.dev
2. Blog：https://blog.stackblitz.com/posts/what-is-vite-introduction
3. Rolldown：https://rolldown.rs