异步路由

编辑页面

了解如何通过 Expo Router 中的异步打包来加快开发速度。

重要异步路由处于 alpha 阶段。

Expo Router 可以使用 React Suspense 根据路由文件自动拆分你的 JavaScript bundle。这样可以加快开发速度，因为只有你导航到的路由才会被打包或加载到内存中。这对于减小应用的初始 bundle 大小也很有帮助。

使用 Hermes Engine 的应用不会从 bundle 拆分中获得太多收益，因为字节码已经提前映射到内存中。不过，它会提升你的空中更新、React Server Components 和 Web 支持。

在原生平台上进行生产环境打包时，所有 suspense 边界都会被禁用，并且不会有加载状态。

工作原理

所有路由都会被包裹在一个 suspense 边界中，并异步加载。这意味着你第一次导航到某个路由时，加载会稍微慢一些。不过，一旦加载完成，它就会被缓存，后续访问将会立即显示。

加载错误会在父路由中通过 ErrorBoundary 导出进行处理。

在开发过程中，异步路由无法被静态分析，因此即使文件没有导出默认组件，也会将所有文件视为路由。在组件完成打包并加载后，任何无效路由都会使用一个回退警告界面。

对于熟悉高级打包技术的人来说，异步路由功能由 React Suspense、基于路由的代码拆分和懒加载打包（开发中）组成。

设置

通过在你的 app 配置中的 Expo Router 配置插件里设置 asyncRoutes 选项来启用该功能：

将 asyncRoutes 设置为 true 以启用生产环境的包拆分。

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-router",
        {
          "origin": "https://acme.com",
          "asyncRoutes": {
            "web": true,
            "default": "development"
          }
        }
      ]
    ]
  }
}

你可以使用对象为 asyncRoutes 设置平台特定配置（default、android、ios 或 web）：

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-router",
        {
          "origin": "https://acme.com",
          "asyncRoutes": {
            "web": true,
            "android": false,
            "default": "development"
          }
        }
      ]
    ]
  }
}

然后，在即将启动项目时，你可以使用 --clear 标志清除 Metro 缓存。这将确保路由以异步方式加载：

Terminal

- npx expo start --clear

# 或在导出时

- npx expo export --clear

静态渲染

在生产版 Web 应用中，静态渲染通过在 Node.js 中同步渲染所有 Suspense 边界来支持，然后基于某个 HTML 文件所选中的所有路由，将所有异步 chunk 连接到 HTML 中。这可以确保你在服务器导航时不会遇到一连串的加载状态。后续的导航会递归加载任何缺失的 chunk。

为了确保首次渲染的一致性，通向某个 URL 的叶子路由之前的所有布局路由都会包含在初始服务器响应中。

所有使用 unstable_settings = { initialRouteName: '...' } 定义的初始路由都会包含在初始 HTML 文件中，因为首次渲染需要它们。例如，如果服务器请求的是一个模态框，那么模态框下方渲染的屏幕也会被包含进来，以确保模态框能够正确渲染。

注意事项

Async Routes 代表了我们未来计划支持 React Server Components 的早期预览。因此，有一些注意事项需要了解：

Async Routes 目前还不支持原生生产应用。
在开发环境中，运行时 JavaScript 会采用懒加载打包，因此你可能会遇到 HTML 与可用 JavaScript 不匹配的情况。
目前无法自定义加载状态。