React Router v7 已發佈。 查看文件
伺服器捆綁包

伺服器捆綁包

這是一個專為託管服務供應商整合設計的高級功能。當將您的應用程式編譯成多個伺服器捆綁包時,需要在您的應用程式前端有一個自訂的路由層,將請求導向正確的捆綁包。

Remix 通常會將您的伺服器程式碼建置成一個捆綁包,其中公開單一的請求處理函式。然而,在某些情況下,您可能希望將您的路由樹分割成多個伺服器捆綁包,每個捆綁包都為路由子集公開一個請求處理函式。為了提供這種彈性,Remix Vite 外掛支援 serverBundles 選項,這是一個用於將路由分配給不同伺服器捆綁包的函式。

為樹中的每個路由(除了不可定址的路由,例如無路徑佈局路由)呼叫提供的 serverBundles 函式,並傳回您要將其分配到的伺服器捆綁包 ID。這些捆綁包 ID 將用作您的伺服器建置目錄中的目錄名稱。

對於每個路由,此函式會傳遞一個路由陣列,該陣列包含導向該路由和包含該路由的路由,稱為路由 branch。這允許您為路由樹的不同部分建立伺服器捆綁包。例如,您可以使用此功能來建立一個單獨的伺服器捆綁包,其中包含特定佈局路由中的所有路由

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

export default defineConfig({
  plugins: [
    remix({
      serverBundles: ({ branch }) => {
        const isAuthenticatedRoute = branch.some((route) =>
          route.id.split("/").includes("_authenticated")
        );

        return isAuthenticatedRoute
          ? "authenticated"
          : "unauthenticated";
      },
    }),
  ],
});

branch 陣列中的每個 route 都包含以下屬性

  • id — 此路由的唯一 ID,命名方式與其 file 類似,但相對於應用程式目錄且不含副檔名,例如,app/routes/gists.$username.tsxidroutes/gists.$username
  • path — 此路由用於比對 URL 路徑名的路徑。
  • file — 此路由進入點的絕對路徑。
  • index — 此路由是否為索引路由。

建置資訊清單

建置完成後,Remix 會呼叫 Vite 外掛的 buildEnd 勾點,並傳遞 buildManifest 物件。如果您需要檢查建置資訊清單以確定如何將請求路由到正確的伺服器捆綁包,這會很有用。

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

export default defineConfig({
  plugins: [
    remix({
      // ...
      buildEnd: async ({ buildManifest }) => {
        // ...
      },
    }),
  ],
});

使用伺服器捆綁包時,建置資訊清單包含以下屬性

  • serverBundles — 一個將捆綁包 ID 對應到捆綁包的 idfile 的物件。
  • routeIdToServerBundleId — 一個將路由 ID 對應到其伺服器捆綁包 ID 的物件。
  • routes — 一個路由資訊清單,將路由 ID 對應到路由中繼資料。這可以用於驅動您的 Remix 請求處理常式前端的自訂路由層。

或者,您可以在 Vite 外掛上啟用 manifest 選項,以將此建置資訊清單物件以 .remix/manifest.json 形式寫入您的建置目錄中。

文件和範例授權條款為 MIT