elegua icon indicating copy to clipboard operation
elegua copied to clipboard

Support for lazy component imports

Open FluffyDiscord opened this issue 2 years ago • 3 comments

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'))} />

FluffyDiscord avatar Sep 16 '23 07:09 FluffyDiscord

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.

howesteve avatar Nov 16 '23 23:11 howesteve

Any updates on this?

FluffyDiscord avatar Feb 19 '24 14:02 FluffyDiscord

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.

howesteve avatar Feb 21 '24 21:02 howesteve