异步路由

学习如何通过 Expo Router 中的异步打包加快开发速度。

异步路由是一个实验性功能。

Expo Router 可以基于路由文件自动拆分你的 JavaScript 包，使用 React Suspense。这使得开发更快，因为只有你导航到的路由会被打包或加载到内存中。这对于减少应用程序的初始包大小也很有用。

使用 Hermes Engine 的应用程序在包拆分方面的受益不大，因为字节码已经提前在内存中映射。不过，它会改善你的空中更新、React 服务器组件和网络支持。

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

工作原理

所有路由都包装在一个 suspense 边界内并异步加载。这意味着第一次导航到一个路由时，加载时间会稍长。但是，一旦加载，它会被缓存，后续访问将是瞬时的。

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

在开发过程中，异步路由无法静态分析，因此所有文件将被视为路由，即使它们不导出默认组件。组件打包并加载后，任何无效路由都将使用回退警告屏幕。

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

设置

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

设置 asyncRoutes 为 true 以启用生产包拆分。

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

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

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

然后，当你准备开始项目时，可以使用 --clear 标志来清除 Metro 缓存。这将确保路由异步加载：

静态渲染

静态渲染通过在 Node.js 中同步渲染所有 Suspense 边界，在生产 Web 应用中受到支持，然后根据给定 HTML 文件所选路由将所有异步块链接在一起。这确保你在服务器导航时不会遇到加载状态的瀑布流。后续导航将递归加载任何缺失的块。

为确保一致的首次渲染，所有指向 URL 的叶路由的布局路由将包含在初始服务器响应中。

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

注意事项

异步路由代表了我们未来计划如何支持 React 服务器组件 的早期预览。因此，有一些注意事项需要了解：

• 异步路由尚不支持原生生产应用。
• 在开发中，运行时 JavaScript 是懒加载打包的，因此你可能会遇到 HTML 与可用 JavaScript 不匹配的情况。
• 此时加载状态无法自定义。