-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(docs): Update async-routes.mdx (expo#22849)
# Why - mirror expo/router@d13c677 --------- Co-authored-by: Aman Mittal <[email protected]>
- Loading branch information
1 parent
3ca5f4b
commit 2d3167e
Showing
2 changed files
with
27 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,20 @@ | ||
--- | ||
title: Async routes | ||
description: Learn how to load routes asynchronously when using Expo Router. | ||
description: Learn how to speed up development with async bundling in Expo Router. | ||
--- | ||
|
||
import { Terminal } from '~/ui/components/Snippet'; | ||
import Video from '~/components/plugins/Video'; | ||
|
||
> **warning** This guide requires `[email protected]` or above. Everything listed here is still experimental. You may need to use [Expo CLI on `main`](https://github.com/expo/expo/tree/main/packages/%40expo/cli#contributing) to use these features. | ||
> This guide requires `[email protected]` or higher and `[email protected]` — everything listed here is still experimental. To use these features, you may need to [use Expo CLI on `main`](https://github.com/expo/expo/tree/main/packages/%40expo/cli#contributing). | ||
> Metro Bundler has a special development-only bundle splitting feature which can be used to defer bundling unused code until it is needed. This system was developed at Meta for incrementally developing the Facebook app at scale. However, it is rarely seen outside of Meta as it requires specialized setup and routing architecture. | ||
<Video file="expo-router/async-routes.mp4" loop={false} /> | ||
|
||
Expo Router can automatically split your JavaScript bundle based on the route files using [React Suspense](https://react.dev/reference/react/Suspense). This enables faster development as only the routes you navigate to will be bundled or loaded into memory. This can also be useful for reducing the initial bundle size for your application. | ||
|
||
Apps using the Hermes Engine will not benefit as much from bundle splitting as the bytecode is already memory mapped ahead of time. However, it will improve your over-the-air updates, React Server Components, and web support. | ||
|
||
> When you bundle for production, all suspense boundaries will be disabled and there will be no loading states. | ||
> When bundling for production, all suspense boundaries **will be disabled** and there will be no loading states. | ||
## How it works | ||
|
||
|
@@ -25,27 +26,29 @@ Async routes cannot be statically filtered during development, so all files will | |
|
||
## Static rendering | ||
|
||
The current static rendering system doesn't support React Suspense, so we have to disable it when rendering static pages. This will be improved in the future. | ||
The current static rendering system (React) doesn't support React Suspense, so async routes will be disabled on web when rendering static pages. This will be improved in the future. | ||
|
||
## Setup | ||
|
||
Configure Metro to use Expo's bundle splitting features: | ||
|
||
```js metro.config.js | ||
const { getDefaultConfig } = require('@expo/metro-config'); | ||
const config = getDefaultConfig(__dirname); | ||
config.transformer = { | ||
...config.transformer, | ||
asyncRequireModulePath: require.resolve('@expo/metro-runtime/async-require'), | ||
}; | ||
config.server = { | ||
...config.server, | ||
experimentalImportBundleSupport: true, | ||
}; | ||
module.exports = config; | ||
Enable the feature by setting the `asyncRoutes` option to `development` in your [app config](/versions/latest/config/app/): | ||
|
||
```json app.json | ||
{ | ||
"expo": { | ||
"plugins": [ | ||
[ | ||
"expo-router", | ||
{ | ||
"origin": "https://acme.com", | ||
"asyncRoutes": "development" | ||
} | ||
] | ||
] | ||
} | ||
} | ||
``` | ||
|
||
Next, enable the feature by setting the `asyncRoutes` option to `development` in your **app.json**: | ||
You can set platform-specific settings (`default`, `android`, `ios` or `web`) for `asyncRoutes` using an object: | ||
|
||
```json app.json | ||
{ | ||
|
@@ -55,7 +58,10 @@ Next, enable the feature by setting the `asyncRoutes` option to `development` in | |
"expo-router", | ||
{ | ||
"origin": "https://acme.com", | ||
"asyncRoutes": "development" | ||
"asyncRoutes": { | ||
"android": false, | ||
"default": "development" | ||
} | ||
} | ||
] | ||
] | ||
|
Binary file not shown.