Remix ❤️ Vite

今天我們很興奮地宣布，Remix v2.2.0 中已提供對 Vite 的不穩定支援！現在，當您使用 Remix 時，您可以直接體驗到 Vite 閃電般快速的 DX ⚡️ 的所有優勢。

立即試用！

# minimal server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite

# custom Express server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express

請查看新的文件，了解如何在 Remix 中使用 Vite

那麼，閃電般快速 ⚡️ 到底有多快呢？我們在 M1 Max MacBook Pro 上針對 Indie Stack 進行了一些快速測試，結果如下

HMR 快 10 倍 🔥
HDR 快 5 倍 🔥

但我們切換到 Vite 並不只是為了速度。與傳統的構建工具不同，Vite 專為構建框架而設計。

事實上，使用 Vite 後，Remix 不再是編譯器。Remix 本身只是一個 Vite 外掛

// vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [remix()],
});

有了這個，您還可以存取整個 Vite 外掛生態系統。這讓我們可以專注於將 Remix 的核心做到最好，同時讓 Vite 外掛處理其餘部分。想要將 SVG 作為 React 組件導入嗎？有一個 Vite 外掛可以做到。使用 tsconfig 路徑別名？Vite 外掛。喜歡使用 Vanilla Extract？Vite 外掛。想要使用 MDX？與 Vite 相容的 Rollup 外掛。需要客製化的東西？撰寫您自己的外掛！

以下是使用 Remix Vite 外掛時您會獲得的更多好處

幾乎瞬間啟動開發。Vite 會按需延遲編譯您的應用程式程式碼，因此開發伺服器可以立即啟動。
預先打包的依賴項。Vite 只會處理依賴項一次，因此 Material UI 和 AntD 等大型函式庫不會成為重建或熱更新的瓶頸。
增量熱更新。Vite 會追蹤依賴項，因此只需要重新處理依賴於變更的應用程式程式碼。
大幅減少記憶體使用量。Vite 可以理解 import 語句，並且可以有效地使伺服器上過時的模組失效，而無需依賴耗費記憶體的技巧來繞過 import 快取。這應該可以消除開發期間現有的記憶體不足錯誤。
自動基於路由的 CSS 分割。Vite 的 CSS 分割只會載入目前頁面所需的樣式。
在 HMR 期間更好地保存瀏覽器狀態。Vite 的內建 HMR 執行階段和錯誤覆蓋層可確保即使存在伺服器錯誤，瀏覽器狀態也能保持不變。
自動熱伺服器更新。影響伺服器的程式碼變更會立即反映在您執行的伺服器中，而無需重新啟動，也無需任何 global 技巧
ESM 和 CJS 互操作性。您撰寫 ESM，Vite 輸出 ESM。您的依賴項可以是 ESM 或 CJS。Vite 會處理其餘部分。
所有檔案的 TypeScript。您的專案根目錄不再需要 .js 或 .mjs 檔案。使用 vite.config.ts，甚至可以使用 tsx server.ts 或 node --loader tsm server.ts 執行您的自訂伺服器。
工作區。改善了 monorepo 的工作區相容性。與 Vite 支援的任何套件管理器搭配使用：npm、yarn、pnpm 等。
瀏覽器相容性目標。使用 Vite 的 build.target 或取得瀏覽器清單支援的外掛。

為什麼是現在？

讓我們從頭開始。為什麼 Remix 一開始不使用 Vite？簡單的答案是，Vite 的穩定版本尚未出現！

Remix 開發始於 2020 年 7 月，但 Vite 的第一個穩定版本直到 2021 年 2 月才發布。即使如此，採用 Vite 仍然有三個阻礙因素

穩定的 SSR 支援
非 Node 執行階段支援 (Deno、Cloudflare)
伺服器感知、全堆疊 HMR

同時，Remix 編譯器在 2021 年 3 月從 Rollup 切換到 esbuild。

在 2022 年 7 月，Vite 穩定了 SSR 支援，而在幾個月後的 2022 年 9 月，Deno 變得與 Vite 相容。雖然取得了進展，但 Vite 仍然缺少 Cloudflare 支援和伺服器感知的 HMR。

同時，在 2022 年底，我們專注於協助使用者從 Create React App 和 Webpack 遷移到 Remix。然後在 2023 年 3 月，React 停止推薦 CRA 並正式推薦全堆疊框架，包括 Remix。我們在 2023 年開始時，準備處理伺服器感知的 HMR，並且在 2023 年 5 月，我們終於使用熱資料重新驗證破解了這個問題。

在這一點上，Remix 團隊的一半成員正埋首於編譯器改進，以處理 polyfill 並最佳化重建。對於許多使用者來說，主要的瓶頸是重新處理 Material UI 和 AntD 等大型組件函式庫，因此我們開始研究預先打包依賴項。在原型化解決方案時，我們意識到我們需要從頭開始，在 esbuild 的低階外掛系統之上重新實作模組快取、依賴項追蹤和轉換管道。簡而言之，我們實際上會建立一個更糟的 Vite 版本。因此，在 2023 年 6 月，我們開始為 Remix 原型化 Vite 外掛。

這使得 Vite 中的 Cloudflare 支援成為最後一個缺失的部分。今天，我們正與 CF 核心團隊直接合作，並且有信心可以在 Remix Vite 外掛穩定之前提供一流的 CF 支援。

我們很樂意收到您的意見

俗話說：如果您的不穩定版本沒有錯誤，那就表示您發布得太晚了。😅 但說真的，我們希望收到您的意見。

我們有一些已知問題，因此在提交錯誤報告之前，請務必查看這些問題 (包括開啟和已關閉的問題)。它的運作方式是否符合您的預期？是否有任何遺漏？您是否覺得遷移指南有所幫助？請告訴我們！

感謝 Vite！

我們的使用者表示，Remix 讓 Web 開發再次變得有趣。對我們來說，Vite 讓框架開發再次變得有趣。我們很高興能加入廣泛且友善的 Vite 生態系統，並自豪地宣布 Remix 和 Shopify 現在將贊助 Vite！

Vite 是一個很棒的專案，我們感謝 Vite 團隊所做的工作。特別感謝 Vite 團隊的 Matias Capeletto (patak)、Arnaud Barré 和 Bjorn Lu 的指導。

Remix 社群很快地探索了 Vite 支援，我們感謝他們的貢獻

最後，我們受到其他框架如何實作 Vite 支援的啟發

為什麼是現在？

我們很樂意收到您的意見

感謝 Vite！

取得有關最新 Remix 新聞的更新