Remix 在 v2.10.0
(后来在 v2.13.0
中稳定为 future.v3_lazyRouteDiscovery
)中通过 future.unstable_lazyRouteDiscovery
未来标志 引入了对延迟路由发现(又名“战争迷雾”)的支持 (RFC)。这使您可以选择采用这种行为,这种行为将在 Remix 的下一个主要版本(又名 React Router v7)中成为默认行为 (1, 2)。有关此功能的更多信息,请查看 博文。
目前,Remix 在初始加载时在一个 JS 文件(即 /assets/manifest-[hash].js
)中加载完整的路由清单。清单不包含路由模块实现,而是包含它们的 URL 路径和元信息(路由 JS/CSS 导入、它们在服务器上是否具有 loader
/action
等)。拥有这种预先存在的完整清单使 Remix 能够在链接点击时进行同步客户端路由匹配,并立即启动路由模块和数据的加载。对于中小型应用程序,预先加载完整的清单通常不会造成阻碍,因为它具有高度可缓存性并且压缩效果很好。但是,在规模较大的情况下,我们发现这种清单可能会增长到足以影响某些性能指标。
当您启用“战争迷雾”时,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