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.tsx
的 id
為 routes/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 對應到捆綁包的 id
和 file
的物件。routeIdToServerBundleId
— 一個將路由 ID 對應到其伺服器捆綁包 ID 的物件。routes
— 一個路由資訊清單,將路由 ID 對應到路由中繼資料。這可以用於驅動您的 Remix 請求處理常式前端的自訂路由層。或者,您可以在 Vite 外掛上啟用 manifest
選項,以將此建置資訊清單物件以 .remix/manifest.json
形式寫入您的建置目錄中。