# lazy

为了使你的应用程序包体积更小并支持路由的代码分割，每个路由都可以提供一个异步函数，该函数解析路由定中不匹配路由的部分（如`loader`、`action`、`Component`/`element`、`ErrorBoundary/errorElement`等）。

每个`lazy`函数都会返回一个动态导入的结果。

```typescript
const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
    children: [
      {path: '/', lazy: () => import( "@/pages/home")},
      {path: "/about", lazy: () => import( "@/pages/about")},
      {path: "/profile", lazy: () => import( "@/pages/profile")},
      {path: "/*", element: "404页面"}
    ]
  },
])
```

然后在你需要进行懒加载的路由模块中，导出你想要为路由定义的属性：

```tsx
export async function loader({request, context}: LoaderFunctionArgs) {
  return {}
}

export async function action({request, context}: LoaderFunctionArgs) {
  return {}
}

export const Component = () => {
  return (
    <div>
      <h1>welcome</h1>
    </div>
  );
};

export const ErrorBoundary = () => {
  return "组件渲染异常"
}
```

## 单个文件中存放多个路由

虽然`lazy`在绝大多数情况下是与每个路由的异步`import()`一对一使用的，但是你实现更高级的`lazy`函数。例如，如果你想避免嵌套路由加载多个模块，你可以将这些异步模块全部存储在同一个文件中，并将它们返回给各个路由。

<img src="https://2157805764-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdsJkYFNqShzdAAkbRzjR%2Fuploads%2FznDMB5XGaecjNIPdb2yl%2Ffile.excalidraw.svg?alt=media&#x26;token=a218b765-81d0-435e-98b2-f9a0f2722621" alt="" class="gitbook-drawing">

当组合一些简单的路由组件时，这个方案是最为合适不过的了，你不必为每一个小组件创建一个单独的文件来存储这些数据。
