elegua
elegua copied to clipboard
Support for lazy component imports
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'))} />
Fair enough, I'll implement this in a future version. However, probably will have to be in a separate dynamicAsync() function or something like this.
Any updates on this?
I intend to implement this in upcoming version 3.0 which will be svelte 5 compatible, as I mentioned in #8. I'll be closing this issue when I finish it.