mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
3.1 KiB
JSON
17 lines
3.1 KiB
JSON
{
|
|
"id": "e1fbce3996389b2c4666191c",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "lazy",
|
|
"content": "---\ntitle: lazy\nuse_cases: \u003e-\n code splitting, performance optimization, reducing bundle size, dynamic\n imports, route-based splitting, lazy loading\ntags:\n - lazy-loading\n - code-splitting\n - performance\n - suspense\n - optimization\n - imports\nversion: '1.0'\ndescription: \u003e-\n Lazy load components with code splitting to reduce bundle size and improve\n performance. Components load on-demand and integrate with Suspense.\n---\n\nThe `lazy` helper wraps a dynamic import and returns a component that loads on demand.\nLazy components accept the same props as their eager counterparts and integrate with `\u003cSuspense\u003e` boundaries.\n\n## Import\n\n```tsx\nimport { lazy } from \"solid-js\"\n```\n\n## Type\n\n```tsx\nfunction lazy\u003cT extends Component\u003cany\u003e\u003e(\n fn: () =\u003e Promise\u003c{ default: T }\u003e\n): T \u0026 { preload: () =\u003e Promise\u003cT\u003e }\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `() =\u003e Promise\u003c{ default: T }\u003e`\n- **Required:** Yes\n\nDynamic import that resolves to the component module, exposing the component as the `default` export.\n\n## Return value\n\n`lazy` returns a renderable component compatible with `T`.\nThe component exposes a `preload()` method that resolves the underlying module.\n\n| Property | Type | Description |\n| -------- | ---- | ----------- |\n| `preload` | `() =\u003e Promise\u003cT\u003e` | Loads the module without rendering and returns the resolved component. |\n\n## Examples\n\n### Basic usage\n\n```tsx title=\"app.tsx\"\nimport { lazy } from \"solid-js\"\n\nconst ComponentA = lazy(() =\u003e import(\"./ComponentA\"))\n\nfunction App(props: { title: string }) {\n return \u003cComponentA title={props.title} /\u003e\n}\n```\n\n### Preloading nested lazy components\n\n```tsx\nimport { lazy } from \"solid-js\"\nimport type { Component } from \"solid-js\"\n\nconst Nested = lazy(() =\u003e import(\"./Nested\"))\n\nconst ComponentWithPreload = () =\u003e {\n const [showNested, setShowNested] = createSignal(false)\n\n return (\n\t\u003cdiv\u003e\n\t \u003cbutton\n onMouseEnter={() =\u003e Nested.preload()}\n onClick={() =\u003e setShowNested(true)}\n \u003ePreload Nested Component\u003c/button\u003e\n \u003cShow when={showNested()}\u003e\n\t \u003cNested /\u003e\n \u003c/Show\u003e\n\t\u003c/div\u003e\n )\n}\n```\n\n## See also\n\n- [`Suspense`](https://docs.solidjs.com/reference/components/suspense)\n- [Router preloading guide](/solid-router/advanced-concepts/preloading)",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/lazy.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/component-apis/lazy.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2244,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "ac376f53acbaf7cc6e930e98520819808e3f9730c7de8b71e44c9db5e970a96f",
|
|
"timestamp": "2026-02-23T11:43:00.18876908+01:00"
|
|
} |