延迟路由发现
本页

延迟路由发现(又名“战争迷雾”)

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 中的最小必需路由,而路由将在用户在应用程序中导航时动态添加到其中
  • Remix 处理程序现在具有一个新的内部 /__manifest 端点,通过它可以获取清单修补程序
    • 您需要确保您的部署架构将任何 /__manifest 请求路由到 Remix 处理程序
    • 如果您有任何 CDN/边缘缓存层,/__manifest 路由接受 2 个可能需要包含在缓存键中的查询字符串参数:versionp
    • ⚠️ 这被认为是内部实现细节,不打算被应用程序代码请求
文档和示例根据以下许可发布 MIT