Remix 在 v2.10.0
中,於 future.unstable_lazyRouteDiscovery
Future Flag 後面引入了延遲路由探索(又稱「戰爭迷霧」)(RFC) 的支援(後來在 v2.13.0
中穩定為 future.v3_lazyRouteDiscovery
)。這讓您可以選擇啟用此行為,這將成為 Remix 下一個主要版本(即 React Router v7 (1, 2))的預設行為。如需此功能的更多資訊,請查看部落格文章。
目前,Remix 會在初始載入時將完整的路由清單載入到 JS 檔案中 (例如,/assets/manifest-[hash].js
)。該清單不包含路由模組的實作,而是它們的 URL 路徑和元資訊(路由 JS/CSS 導入、它們是否在伺服器上有 loader
/action
等)。擁有此完整清單,Remix 就可以在用戶點擊連結時同步進行客戶端路由匹配,並立即啟動路由模組和資料的載入。對於中小型應用程式,預先載入完整清單通常不會構成阻礙,因為它是高度可快取的,並且經過 gzip 壓縮效果良好。但是,在規模較大的情況下,我們發現此清單可能會變得很大,足以影響某些效能指標。
當您啟用「戰爭迷霧」時,Remix 將不再在初始載入時傳送完整的路由清單。相反地,您的 SSR 渲染只會在初始清單中包含 SSR 路由,而當使用者在應用程式中瀏覽時,會載入其他路由。隨著時間的推移,清單會擴大到包含使用者瀏覽過的應用程式部分。
請注意,這並不是一種從終端使用者「隱藏」任何應用程式 URL 的方式。它最初不會將它們全部傳送到清單中,但是用於在使用者瀏覽時提取新路由的清單端點仍然能夠公開您所有定義的應用程式路由,儘管它只是稍微隱藏了一些。
一如既往,這種延遲路由探索的類型有所權衡。它可以改善初始應用程式載入時間,但是 Remix 無法再在點擊連結時執行同步路由匹配,這可能會導致瀑布流。
在目前的架構中 (不使用 <Link prefetch>
),點擊連結看起來會像這樣
click /a
|-- load route module -->
|-- load route data -->
| render /a
在「戰爭迷霧」架構中,點擊連結可能會引入瀑布流
click /a
|-- discover route -->
|-- load route module -->
|-- load route data -->
| render /a
眾所周知,Remix 討厭瀑布流,因此「戰爭迷霧」功能實作了一項最佳化,以避免在大多數情況下出現瀑布流。預設情況下,頁面上呈現的所有 <Link>
和 <NavLink>
元件都會被批次處理,並透過對伺服器的請求來預先「探索」。此請求將在伺服器上比對所有目前的連結路徑,並傳回所有必要的路由清單項目。在大多數情況下,此請求應在使用者點擊任何連結之前完成(因為使用者通常不會在前幾百毫秒內點擊連結),並且清單將在點擊任何連結之前修補。然後,當點擊連結時,Remix 能夠執行同步客戶端匹配,就像根本不存在「戰爭迷霧」行為一樣。
如果您希望在每個連結的基礎上選擇退出這種主動路由探索,您可以使用 discover="none"
屬性來實現(預設值為 discover="render"
)。
window.__remixManifest.routes
中的路由清單在初始伺服器端渲染 (SSR) 時只會包含最少的必要路由,並且路由會隨著使用者瀏覽而動態新增至清單中/__manifest
端點,它將透過該端點擷取清單修補程式/__manifest
請求路由到 Remix 處理器/__manifest
路由接受 2 個查詢字串參數,您可能需要在快取鍵中包含它們:version
和 p