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'))} />
dynamic() is really nice to make our code cleaner.
Yet it could be even better.
Right now every component inside
dynamicloads 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:componentneeds to change too to something like this):