code splitting of routers?

[hmmhmmhm]

I have recently focused on developing the Svelte project using Parcel.... By the way, I wonder if the code splitting of parcel can be applied to the routes index map of spa router.

import Home from './routes/Home.svelte'
import Book from './routes/Book.svelte'
import NotFound from './routes/NotFound.svelte'

const routes = {
    '/': Home,

    // Might be like this?
    '/author/:first/:last?': async () => await import('./routes/Author.svelte'),

    '/book/*': Book,
    '*': NotFound
}

[ItalyPaleAle]

Hi @hmmhmmhm I have not tried this, but it should work.

However, what you need to keep in mind is that the async function would be executed when the route object is defined. So, yes, you'd get code splitting – but all routes would be loaded at the same time, on page load.

If you want true async loading, then a possible way is to add to the router a route whose sole job is to load the Author route asynchronously.

If you want to modify this router to support async route loading, you're welcome to submit a PR :)

[hmmhmmhm]

I just searched and found a module called svelte-loadable, and I have succeeded in implementing asynchronous loading through this module. I'll check the structure of the svelte spa router, and if possible, I'll do PR. thanks for answer!

[hmmhmmhm]

https://github.com/hmmhmmhm/svelte-spa-chunk

I maded a async route loading module for svelte-spa-router.
can I add my module to this repo on REAME.MD(Advanced Usage)?

I think it would be more efficient to introduce
a separate extension module than to embed
a module called svelte-loadable into the spa-router.

[hmmhmmhm]

@ItalyPaleAle

[ItalyPaleAle]

Thanks for that. I like your solution, and I think it looks very elegant. I'm happy to include a note in the Advanced Usage readme. Let's continue in #36