howesteve / elegua

Elegua - a small, reactive PWA router for Svelte
https://elegua.netlify.app/
Apache License 2.0
76 stars 4 forks source link

Support for lazy component imports #7

Open FluffyDiscord opened 1 year ago

FluffyDiscord commented 1 year ago

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'))} />
howesteve commented 11 months ago

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.

FluffyDiscord commented 8 months ago

Any updates on this?

howesteve commented 8 months ago

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.