Skip to content

Support for lazy component imports #7

Description

@FluffyDiscord

dynamic() is really nice to make our code cleaner.

Yet it could be even better.

Right now every component inside dynamic loads at the same time when user visits the page. It would be nice to have them load on-demand, with lazy imports. The reason behind this feature request is that once your application grows and we have dozens of routes/pages, the browser then "downloads" all components at once and the initial page load can be longer, especially on mobile networks.

The lazy import should look like this (keep in mind the svelte:component needs to change too to something like this):

<svelte:component this={dynamic($path, [
  ['/', () => import('./Home.svelte')],
  ['/about',  () => import('./About.svelte')],
  ['/blog',  () => import('./Blog.svelte')],
  ['/blog/:post',  () => import('./Post.svelte'), {id: $params['post']}],
],  () => import('./Error.svelte'))} />

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions