{
  "id": "71cd3eaa25bd0d34d2d3af15",
  "source": "solid:signals",
  "type": "github-document",
  "title": "lazy-loading",
  "content": "---\ntitle: Lazy loading\nuse_cases: \u003e-\n  optimizing bundle size, code splitting, reducing initial load, large apps,\n  performance optimization\ntags:\n  - lazy\n  - performance\n  - routing\n  - optimization\n  - splitting\n  - loading\nversion: '1.0'\ndescription: \u003e-\n  Implement lazy loading in Solid Router to reduce initial bundle size. Load\n  components on-demand for better performance in large applications.\n---\n\nLazy loading allows you to load only the necessary resources when they are needed.\nThis can be useful when you have a large application with a lot of routes and components, and you want to reduce the initial load time.\n\nIn Solid Router, you can lazy load components using the `lazy` function from Solid:\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { Router, Route } from \"@solidjs/router\";\n\nconst Home = lazy(() =\u003e import(\"./Home\"));\n\nconst Users = lazy(() =\u003e import(\"./Users\"));\n\nconst App = () =\u003e (\n  \u003cRouter\u003e\n    \u003cRoute path=\"/\" component={Home} /\u003e\n    \u003cRoute path=\"/users\" component={Users} /\u003e\n  \u003c/Router\u003e\n);\n```\n\nIn the example above, the `Users` component is lazy loaded using the `lazy` function.\nThe `lazy` function takes a function that returns a promise, which resolves to the component you want to load.\nWhen the route is matched, the component will be loaded and rendered.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/advanced-concepts/lazy-loading.mdx",
  "metadata": {
    "path": "src/routes/solid-router/advanced-concepts/lazy-loading.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1324,
    "source_type": "github"
  },
  "hash": "47ad1c71f34614acc04fb75f906f858cde863c8d7a628fd65e46b69ffbd6f2f3",
  "timestamp": "2026-02-23T11:43:00.191455609+01:00"
}