Promise and lazy routes...

Looking at yrv router (a good router!) we can see two ways of importing routes:

<Router>
  <Route exact path="/promise" component={import('path/to/other-component.svelte')}/>
  <Route exact path="/lazy" component={() => import('path/to/another-component.svelte')}/>
</Router>

With https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/Advanced Usage.md#async-route-loading we have just the lazy one. Am I correct?

I think it would be useful (and amazing) to have both in svelte-spa-router (three-shaked if we do not use them).

The promise way I think is amazing because I can have a lot of routes and maybe I just need to load immediately just the one I need and after that in background start downloading others.

What do you think about?

[ItalyPaleAle]

Thanks for the great discussion. I think y’all are right and it’s time we implement this natively in the router.

@hmmhmmhm let me know if you are able to work on a PR. If you can, I’d greatly appreciate it, but no pressure 😃

I’m scheduling this for 3.0

[ItalyPaleAle]

There’s currently work being done in #73 to support dynamically-imported routes.

Once that’s implemented, it will be possible to do a lazy loading too, by invoking import('foo.svelte') in your init code in main.js. Subsequent invocations to import, including in async routes as supported by #73, will just return the cached code.

I’ll write some docs on how to do this