Vue 應用程式的建置過程：Rollup 與 Rolldown

作者：Andy Li

建置工具對於現代 Web 開發至關重要，它充當將原始程式碼轉換為瀏覽器可以有效理解和執行的內容的引擎。如果沒有快速、可靠的建置工具，您在啟動開發伺服器時可能會面臨令人沮喪的漫長啟動時間，甚至簡單的程式碼變更也可能需要寶貴的幾秒鐘才能反映在瀏覽器中，從而擾亂您的開發流程和生產力。

在本文中，我們將討論Vue.js 應用程式（或React.js 應用程式）建構過程中涉及的所有內容，包括Vite、esbuild、Rollup 和up-and-由Evan You（Vue.js 和Vite.js 的創建者）正在建構的即將推出的工具，名為Rolldown.

首先，我們從Vite開始。

---

Vite目前的建置流程

與許多其他框架一樣，Vue.js 使用 Vite 作為其建置工具。

Vite有兩種不同的模式：開發模式和生產模式。它們在幕後的實現方式不同。

Vite 針對開發環境和生產環境使用不同的建置策略，以針對其獨特需求進行最佳化。在開發過程中，重點是提供快速回饋和快速熱模組更換 (HMR)，以獲得流暢的開發人員體驗。在生產中，優先順序轉移到為最終用戶產生最佳化的高效能捆綁包。

讓我們來探討Vite如何處理開發構建，其創新方法的真正亮點。

---

開發模式下Vite

在開發模式下，建置速度至關重要。 Vite 不是在每次更改後捆綁程式碼，而是直接以 ESM 格式提供修改後的檔案（如 Vue 元件的 <script> 程式碼），從而以最少的處理實現快速瀏覽器更新。 </script>

在實作中，Vite 將 TypeScript 程式碼轉換為瀏覽器相容的 JavaScript。雖然開發建置所需的步驟比生產少（我們將很快探討），但快速轉換程式碼仍然要求很高，特別是因為變更需要在幾秒鐘內出現在瀏覽器中。

這就是為什麼 Vite 使用 esbuild 這個用 Go 寫的高效能工具。由於 Go 直接編譯為機器語言（處理器可以執行的低階二進位指令），因此 esbuild 提供了卓越的速度 - 這是現代開發伺服器設定的關鍵要求。

---

生產模式下的Vite

雖然建造速度在生產中很重要，但這並不是首要任務。建立生產建置時，無論使用哪種建置工具，您都可能需要等待一些時間。與開發模式（一次僅處理一個檔案及其相依性）不同，生產建置必須從頭開始捆綁所有程式碼，這使得即時建置變得不可能。

此外，生產建造通常需要額外的步驟。例如，您可能需要為舊版瀏覽器轉譯 JavaScript 程式碼——當您可以簡單地使用現代瀏覽器時，這在開發過程中是不必要的。

其他關鍵的生產建置步驟包括縮小（從程式碼中刪除不必要的字符，同時保留功能）和程式碼分割（將程式碼分解為按需載入的較小區塊）。這些過程直接影響程式碼的運行時效能。

生產建置的首要任務是確保程式碼在使用者的瀏覽器中有效運作。這優先於建立速度，因為生產建置偶爾會發生，而使用者會頻繁造訪您的網站。

Vite選擇Rollup進行生產捆綁，是因為其豐富的插件生態，可以直接與Vite一起使用。由於 Vite 的插件架構與 Rollup 相似，因此這種相容性有助於培育蓬勃發展的插件社區，並有助於 Vite 的廣泛採用。

？
總結一下： Vite 使用 esbuild（速度優化）進行開發構建，使用 Rollup（以其插件而聞名）進行生產構建。

雖然這個設定運作良好，但一個重大變化即將到來：Vite 很快就會用一個名為 Rolldown 的新工具取代 esbuild 和 Rollup。

在探索 Rolldown 之前，我們先來看看 Vite 目前的設定所面臨的挑戰，這些挑戰導致了 Rolldown 的發明。

---

Vite 的問題

當建置工具或捆綁器處理您的原始程式碼時，它首先會建立一個抽象語法樹 (AST) - 一種表示程式碼語法和結構的樹狀資料結構。例如，函數宣告將成為 AST 中的「FunctionDeclaration」節點，其子節點為其參數和主體。

使用兩個不同的工具來解析相同的原始程式碼對於程式碼轉換來說效率很低，因為單一工具（或一組相容的工具）可以在整個過程中重複使用解析的結果。

esbuild在處理Vite的開發模式的同時，也透過縮小在生產模式中發揮作用。這意味著 esbuild 和 Rollup 在建置過程中按順序運行。對於 React 應用程序，隨著 SWC（另一種用 Rust 編寫的構建工具）與 esbuild 和 Rollup 一起添加，該過程變得更加複雜。

按順序使用多個工具會導致效率低下，因為每個工具必須獨立解析程式碼並在它們之間傳遞結果。雖然 Rollup 強大的插件生態系統使其對於生產構建很有價值，但與 esbuild 相比，其速度較慢，這是一種權衡。理想的解決方案是將 esbuild 的效能與 Rollup 的可擴展性結合的工具，而這正是 Rolldown 想要實現的目標。

---

滾降簡介

Rolldown 是用 Rust 寫的捆綁器，Rust 是一種程式語言，與 Go 一樣，可以直接編譯為機器碼。這意味著 Rolldown 將達到與 esbuild 類似的速度。

由於 Rolldown 與 Rollup 共享類似的插件 API，因此大多數現有的 Vite 相容外掛程式將與新的 Rolldown 支援的 Vite 版本無縫協作。

本質上，您將能夠像現在一樣使用 Vite，只是效能有所提高。

那我們所說的速度要快多少？ 如果速度是主要賣點，那麼它需要明顯更快才能證明採用新工具的合理性，對吧？

根據 Evan You 的基準測試，在測試 Vue 核心原始碼的捆綁速度時，Rolldown 的建置設定的執行速度比基於 Rollup 的設定快 7 倍以上。

此基準測試專門衡量生產建置時間。 開發怎麼樣？

目前Vite使用esbuild進行開發。根據 Evan You 的基準測試，Rolldown 的執行速度幾乎是 esbuild 的兩倍。由於 esbuild 已經具有高性能，因此這種改進比 Rollup 比較更溫和。

所有這些效能升級均由 Rolldown 中的一套底層工具提供支援。其中包括新的解析器、linter、解析器、變壓器等 - Oxc 專案的所有部分（由 Rolldown 團隊創建）。

Oxc 是一套 JavaScript 語言工具。儘管這些工具是在 Rolldown 中使用的，但它們也可以在非 Rolldown 上下文中單獨使用。例如，Oxc linter 比 ESLint 更快，因此可以在 CI 工作流程中使用它在執行 ESLint 之前快速擷取程式碼錯誤。

Oxc 工具通常比其他類似工具更快，因為它們是從頭開始編寫的，以效能為主要目標。

---

Vite的未來

雖然 Rolldown 尚未做好生產準備，但預計會在 2024 年底之前發布具有 Rolldown 集成功能的 Vite alpha 版本。我們將在未來幾個月繼續報導 Vue、Vite 和 Rolldown 的最新進展。

如果您想了解有關 Vite 的更多信息，請查看 Vue Mastery 上的閃電快速構建課程，該課程由 Vite 的創建者 Evan You 親自授課。

原發表於 https://www.vuemastery.com 2024 年 12 月 4 日。

---

以上是Vue 應用程式的建置過程：Rollup 與 Rolldown的詳細內容。更多資訊請關注PHP中文網其他相關文章！